/* Font loaded via <link> in index.html */

/* ============================================
   THIÊN HÀ DESIGN & PRINTING - Color Theme
   Based on CMY logo colors:
   - Primary (Cyan):   #00AEEF
   - Secondary (Magenta): #EC008C
   - Accent (Yellow):  #FFD600
   ============================================ */

:root {
  /* Font family */
  --tp-ff-body: 'Be Vietnam Pro', sans-serif;
  --tp-ff-heading: 'Be Vietnam Pro', sans-serif;
  --tp-ff-p: 'Be Vietnam Pro', sans-serif;

  /* === THEME COLORS - Thiên Hà Brand === */
  --tp-theme-primary: #00AEEF;
  --tp-theme-secondary: #EC008C;
  --tp-border-primary: #00AEEF;

  /* Thiên Hà extended palette */
  --th-cyan: #00AEEF;
  --th-cyan-dark: #0088CC;
  --th-cyan-darker: #006699;
  --th-cyan-light: #E8F8FF;
  --th-magenta: #EC008C;
  --th-magenta-dark: #C50075;
  --th-magenta-light: #FFF0F8;
  --th-yellow: #FFD600;
  --th-yellow-dark: #E6C200;
  --th-footer-bg: #003D5C;
  --th-footer-bottom: #002A3F;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
input,
textarea,
select,
button,
label,
td,
th,
div {
  font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* ============================================
   SEARCH POPUP - Speed Override
   ============================================ */
.search-popup {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-active .search-popup form {
  transition-delay: 200ms !important;
}

.search-active .search-popup .close-search {
  transition-delay: 300ms !important;
}

/* ============================================
   HERO SLIDER
   ============================================ */
.th-hero-slider {
  width: 100%;
  height: 100%;
}

.th-slide-item {
  display: block;
  width: 100%;
  min-height: 780px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: transform 0.3s ease;
}

/* Hiệu ứng mờ cho ảnh (Đã tắt theo yêu cầu) */
.th-slide-item::after {
  display: none !important;
}

/* Social sidebar - nổi lên trên slider */
.tp-slider-5-social {
  position: absolute;
  z-index: 50 !important;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  padding: 16px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tp-slider-5-social a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  text-align: center;
  display: block !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border-radius: 50% !important;
  margin-bottom: 10px !important;
  font-size: 16px;
  transition: all 0.3s ease;
}

.tp-slider-5-social a:hover {
  background: var(--th-cyan) !important;
  border-color: var(--th-cyan) !important;
  color: #fff !important;
  transform: scale(1.12);
}

.tp-slider-5-social span {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) !important;
  display: block !important;
  margin: 18px auto 0 !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.tp-slider-5-social span::before {
  display: none !important;
}

/* Slider pagination */
.th-slider-pagination {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}

.th-slider-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.th-slider-pagination .swiper-pagination-bullet-active {
  background: var(--th-cyan);
  transform: scale(1.3);
}

@media (max-width: 767px) {
  .th-slide-item {
    min-height: 400px;
  }
}

/* ============================================
   HEADER
   ============================================ */

/* Top bar */
.tp-header-5-top {
  background: var(--th-cyan-light) !important;
}

.tp-header-5-top-shoping,
.tp-header-5-top-shoping span,
.tp-header-5-top-shoping a,
.tp-header-5-top-shoping i {
  color: #000000 !important;
}

.tp-header-5-top-shoping a {
  text-decoration: none !important;
}

/* Header bottom/navbar background */
.tp-header-5-bottom {
  background: var(--tp-common-white) !important;
}

/* Logo sizing */
.tp-header-2-logo img {
  max-height: 56px;
  width: auto;
}

.tpoffcanvas__logo img {
  max-height: 56px;
  width: auto;
}

/* Sticky header */
.header-sticky {
  background-color: var(--tp-common-white) !important;
  box-shadow: 0 2px 20px rgba(0, 174, 239, 0.1) !important;
}

/* Header CTA button */
.tp-header-5-btn {
  background: var(--th-cyan) !important;
}

.tp-header-5-btn::before {
  background: var(--th-cyan-dark) !important;
}

.tp-header-5-btn:hover {
  color: var(--tp-common-white) !important;
}

/* Cart badge */
.tp-header-5-shop span {
  background-color: var(--th-magenta) !important;
}

/* ============================================
   SLIDER / HERO SECTION
   ============================================ */
.tp-slider-5-bg {
  background: var(--th-cyan-light) !important;
}

.tp-slider-5-bg-overlay {
  background: linear-gradient(135deg, #d4f4ff 0%, #e8f8ff 100%) !important;
}

/* Slider subtitle tag */
.tp-slider-5-sub-title {
  background: var(--th-yellow) !important;
  color: var(--th-footer-bg) !important;
}

/* Slider CTA button */
.tp-slider-5-content .tp-btn-red {
  background: var(--th-magenta) !important;
}

.tp-slider-5-content .tp-btn-red::before {
  background: var(--th-magenta-dark) !important;
}

/* Slider price highlight */
.tp-slider-5-price-title span {
  color: var(--th-magenta) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary red button → now Magenta */
.tp-btn-red {
  background: var(--th-magenta) !important;
}

.tp-btn-red::before {
  background: var(--th-magenta-dark) !important;
}

/* Border button */
.tp-btn-border span {
  color: var(--th-cyan-dark);
}

.tp-btn-border:hover {
  border-color: var(--th-cyan) !important;
  color: var(--tp-common-white) !important;
}

.tp-btn-border::before {
  background: var(--th-cyan) !important;
}

/* Back to top */
.back-to-top-btn.secondary {
  background: var(--th-magenta) !important;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.tp-section-sub-title {
  color: var(--th-cyan) !important;
}

.tp-section-sub-title.two {
  color: var(--th-magenta) !important;
}

.tp-section-sub-title.five {
  background: var(--th-yellow) !important;
  color: var(--th-footer-bg) !important;
}

/* ============================================
   ABOUT SECTION - Progress bars
   ============================================ */
.tp-about-5-progress-bar {
  background-image: linear-gradient(270deg, #ffffff 0%, var(--th-magenta) 100%) !important;
}

.tp-about-5-progress-bar.two {
  background-image: linear-gradient(270deg, #ffffff 0%, var(--th-cyan) 100%) !important;
}

.tp-about-5-progress-bar span {
  color: var(--th-magenta) !important;
}

.tp-about-5-progress-bar span.two {
  color: var(--th-cyan-dark) !important;
}

/* About call icon */
.tp-about-5-call-icon a {
  color: var(--th-magenta) !important;
  border-color: var(--th-magenta-light) !important;
}

.tp-about-5-call-icon a:hover {
  background: var(--th-magenta) !important;
  color: var(--tp-common-white) !important;
  border-color: var(--th-magenta) !important;
}

/* ============================================
   FEATURE SECTION
   ============================================ */
.tp-feature-2-icon.two {
  border-color: var(--th-cyan-light) !important;
}

/* ============================================
   SERVICE SECTION - Buttons with CMY colors
   ============================================ */
.tp-service-5-btn.one a:hover {
  background: var(--th-cyan) !important;
  color: var(--tp-common-white) !important;
}

.tp-service-5-btn.two a:hover {
  background: var(--th-magenta) !important;
  color: var(--tp-common-white) !important;
}

.tp-service-5-btn.three a:hover {
  background: var(--th-yellow) !important;
  color: var(--th-footer-bg) !important;
}

.tp-service-5-btn.four a:hover {
  background: var(--th-cyan-dark) !important;
  color: var(--tp-common-white) !important;
}

/* Service card hover effect */
.tp-service-5-wrapper:hover {
  box-shadow: 0 10px 40px rgba(0, 174, 239, 0.12);
}

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */
.tp-testimonial-5-thumb-icon span {
  background: var(--th-cyan) !important;
}

/* ============================================
   CTA (Call To Action) SECTION
   ============================================ */
.tp-cta-4-area.two {
  background-image: linear-gradient(90deg, var(--th-cyan) 0%, var(--th-footer-bg) 58%, var(--th-magenta) 100%) !important;
}

/* ============================================
   TEXT SLIDER
   ============================================ */
.tp-text-slider-text {
  -webkit-text-stroke-color: var(--th-cyan) !important;
}

/* ============================================
   PRODUCT SECTION
   ============================================ */
.tp-product-bg-overlay.five {
  background: linear-gradient(135deg, #00AEEF 0%, #0077B6 100%) !important;
}

.tp-product-bg-overlay.five-two {
  background: linear-gradient(135deg, #EC008C 0%, #C50075 100%) !important;
}

.tp-product-sub-title.five {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Product card — text trắng trên nền đậm */
.tp-product-bg-overlay.five .tp-product-sub-title,
.tp-product-bg-overlay.five .tp-product-title,
.tp-product-bg-overlay.five-two .tp-product-sub-title,
.tp-product-bg-overlay.five-two .tp-product-title {
  color: #fff !important;
}

.tp-product-bg-overlay.five .tp-btn-border span,
.tp-product-bg-overlay.five-two .tp-btn-border span {
  color: #fff !important;
}

.tp-product-bg-overlay.five .tp-btn-border,
.tp-product-bg-overlay.five-two .tp-btn-border {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.tp-product-bg-overlay.five .tp-btn-border:hover,
.tp-product-bg-overlay.five-two .tp-btn-border:hover {
  border-color: #fff !important;
  background: transparent !important;
}

/* Hover: nền đen đặc quét-lấp từ trái sang, chữ giữ trắng —
   giống hệt hiệu ứng nút xanh .tp-btn ("Tìm hiểu thêm"). */
.tp-product-bg-overlay.five .tp-btn-border::before,
.tp-product-bg-overlay.five-two .tp-btn-border::before {
  background: var(--tp-common-black) !important;
}

/* ============================================
   FEATURED SHOP SECTION
   ============================================ */
.th-featured-shop .tp-section-title {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.th-featured-shop .tp-section-sub-title {
  font-size: 13px;
}

.th-featured-shop .tp-btn {
  background: var(--th-cyan) !important;
  color: #fff !important;
}

.th-featured-shop .tp-btn::before {
  background: var(--th-cyan-dark) !important;
}

/* --- Product Card: Soft Modern --- */
/* Override padding gốc từ theme */
.th-featured-shop .product_wrapper {
  padding: 0 !important;
}

.th-featured-shop .product_wrapper.two {
  background: #fff;
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid #eee;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.th-featured-shop .product_wrapper.two:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Bỏ drop-shadow riêng cho phần Sản phẩm liên quan (shop-details) */
.th-related-products .product_wrapper.two {
  filter: none;
}

/* Fix: cho sản phẩm hover nổi lên không bị cắt phần trên */
.th-related-products .swiper-container {
  overflow: visible;
}

.th-related-products .tp-product-slider {
  overflow: hidden;
  padding-top: 10px;
}

/* Ẩn header cũ */
.th-featured-shop .product__top-brand {
  display: none !important;
}

/* --- Vùng ảnh: vuông, radius đều 4 góc --- */
.th-featured-shop .product__thumb {
  background: #F5F5F7;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  /* margin: 12px !important; */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.th-featured-shop .product__thumb>a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.th-featured-shop .product__thumb img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

.th-featured-shop .product_wrapper.two:hover .product__thumb img {
  transform: scale(1.05);
}

/* --- Action Buttons: vuông trắng, góc phải trên --- */
.th-featured-shop .product__action {
  position: absolute !important;
  right: 10px;
  top: 10px;
  gap: 6px;
  opacity: 0;
  visibility: visible !important;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.th-featured-shop .product_wrapper.two:hover .product__action {
  opacity: 1;
  transform: translateX(0);
}

.th-featured-shop .product-action-btn {
  width: 36px !important;
  height: 36px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #303030 !important;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.th-featured-shop .product-action-btn:hover {
  background: var(--th-cyan) !important;
  color: #fff !important;
  transform: scale(1.1);
}

.th-featured-shop .product-action-tooltip {
  display: none !important;
}

/* --- Cart icon: nằm cùng cột action buttons --- */
.th-featured-shop .th-cart-btn {
  background: var(--th-cyan) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(0, 174, 239, 0.3);
}

.th-featured-shop .th-cart-btn:hover {
  background: var(--th-cyan-dark) !important;
  color: #fff !important;
  transform: scale(1.1);
  box-shadow: 0 5px 16px rgba(0, 174, 239, 0.45);
}

/* Ẩn product__add cũ (không còn dùng) */
.th-featured-shop .product__add {
  display: none !important;
}

/* --- Content Area --- */
.th-featured-shop .product__content {
  padding: 14px 16px 20px !important;
  background: #fff;
  text-align: center;
}

/* Ẩn rating */
.th-featured-shop .product__rating {
  display: none !important;
}

.th-featured-shop .product__title {
  margin-bottom: 4px !important;
}

.th-featured-shop .product__title a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  transition: color 0.2s ease;
}

.th-featured-shop .product__title a:hover {
  color: var(--th-cyan) !important;
}

/* Giá hiển thị từ HTML */
.th-featured-shop .th-product-price {
  color: var(--th-magenta);
  font-weight: 700;
  font-size: 15px;
  margin-top: 2px;
}

.th-featured-shop .th-product-price .price-sale {
  color: var(--th-magenta);
  font-weight: 700;
}

.th-featured-shop .th-product-price .price-original {
  color: #aaa;
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
  text-decoration: line-through;
}

/* ============================================
   FOOTER
   ============================================ */
.tp-footer-3-area {
  background-color: var(--th-footer-bg) !important;
}

.tp-footer-title {
  color: var(--tp-common-white) !important;
}

.tp-footer-3-call {
  color: rgba(255, 255, 255, 0.85) !important;
}

.tp-footer-3-call:hover {
  color: var(--th-cyan) !important;
}

.tp-footer-4-list ul li a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.tp-footer-4-list ul li a:hover {
  color: var(--th-cyan) !important;
}

.tp-footer-3-thumb-date.five span {
  color: var(--th-yellow) !important;
}

.tp-footer-3-thumb-date.five p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.tp-footer-2-bottom.tp-footer-3-bottom {
  background-color: var(--th-footer-bottom) !important;
}

.tp-footer-3-copy-paragraph {
  color: rgba(255, 255, 255, 0.6) !important;
}

.tp-footer-3-copy-paragraph a {
  color: var(--th-cyan) !important;
}

.tp-footer-text p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.tp-footer-logo img {
  max-height: 70px;
  width: auto;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--th-cyan) !important;
}

/* ============================================
   LINK & HOVER ACCENT
   ============================================ */
a:hover {
  color: var(--th-cyan) !important;
}

/* Menu active/hover */
.tp-main-menu-content ul li:hover>a,
.tp-main-menu-content ul li.active>a {
  color: var(--th-cyan) !important;
}

/* ============================================
   ABOUT HIGHLIGHTS
   ============================================ */

.th-about-highlight-icon {
  color: var(--th-cyan);
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.th-about-highlight-text h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.4;
}

.th-about-highlight-item {
  transition: transform 0.3s ease;
}

.th-about-highlight-item:hover {
  transform: translateX(6px);
}

/* Feature row — bỏ border-bottom, giảm padding */
.tp-feature-5-row {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Feature Font Awesome icons */
.th-feature-fa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--th-cyan-light);
  color: var(--th-cyan);
  font-size: 22px;
  transition: all 0.3s ease;
}

.tp-feature-5-wrapper:hover .th-feature-fa-icon {
  background: var(--th-cyan);
  color: #fff;
  transform: scale(1.1);
}

/* Product-top section — nền nhạt phân cách */
.tp-product-2-area {
  background: #F8F9FA;
}
/* Desktop: bớt khoảng trống 2 đầu (pt-60/pb-60 = 60px nhìn thưa thớt) -> 36px.
   Specificity .tp-product-2-area.pt-60 (0,2,0) > .pt-60 (0,1,0) nên thắng,
   không cần !important. Mobile đã có luật riêng 24px (!important) nên không bị đè. */
.tp-product-2-area.pt-60 {
  padding-top: 36px;
}
.tp-product-2-area.pb-60 {
  padding-bottom: 36px;
}

/* Khối 5 ô đặc điểm (Tư vấn / Hỗ trợ 24/7 / ...): đẩy nội dung lên gần đầu
   section, chừa 15px (trước pt-60 = 60px dư trống; 5px thì sát quá xấu). Mọi màn. */
.tp-feature-5-area.pt-60 {
  padding-top: 15px;
}

/* Product-top — tiêu đề cân đối với About */
.tp-product-2-area .tp-section-title {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 0 !important;      /* bỏ mb-35, dồn khoảng cách về wrapper */
}
/* Dời cụm thẻ danh mục lên gần tiêu đề "DANH MỤC SẢN PHẨM": khoảng cách
   tiêu đề -> hàng thẻ = 15px (trước mb-35 + mb-30 ~66px, thưa). */
.tp-product-2-area .tp-section-title-wrapper {
  margin-bottom: 15px !important;
}

.tp-product-2-area .tp-section-sub-title {
  font-size: 13px;
}

/* About — tiêu đề cân đối */
.tp-about-2-area .tp-section-title {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.tp-about-2-area .tp-section-paragraph {
  font-size: 15px;
  line-height: 1.7;
  color: #303030;
  text-align: justify;        /* căn đều 2 biên cho gọn, chuyên nghiệp */
}

/* About mobile: các khoảng cách bớt thưa cho gọn (user thấy xấu vì quá rộng) */
@media (max-width: 767px) {
  .tp-about-2-area .tp-section-title-wrapper {
    margin-bottom: 16px !important;   /* 30 -> 16 */
  }
  .tp-about-2-area .tp-section-title {
    margin-bottom: 10px !important;   /* 25 -> 10 (sát đoạn văn hơn) */
  }
  .tp-about-2-area .tp-section-paragraph {
    margin-top: 8px !important;       /* 16 -> 8 */
    line-height: 1.6;
  }
  .tp-about-2-right-wrapper .th-about-highlights {
    margin-bottom: 20px !important;   /* 35 -> 20 */
  }
  .tp-about-2-area .th-about-highlight-item {
    margin-bottom: 9px !important;    /* 15 -> 9 (3 gạch đầu dòng sát nhau hơn) */
  }
  /* .pt-80/.pb-80 (specificity cần cao hơn luật P3 .pt-80!important) */
  .tp-about-2-area.pt-80 {
    padding-top: 34px !important;     /* 46 -> 34, bớt thưa 2 đầu section */
  }
  .tp-about-2-area.pb-80 {
    padding-bottom: 34px !important;
  }
  /* Nút "Tìm hiểu thêm": đẩy sang PHẢI + cao 2/3 (54->36px), giữ chữ 14px */
  .tp-about-2-signature-btn {
    margin-left: auto;
  }
  .tp-about-2-signature .tp-btn {
    padding: 8px 28px !important;
    line-height: 20px !important;
  }
}

/* About — bỏ viền mặc định theme cho progres-skill */
.tp-about-2-right-wrapper .th-about-highlights {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* About — CTA row cân đối */
.tp-about-2-signature {
  flex-wrap: wrap;
  gap: 15px;
}

.tp-about-2-signature .tp-btn {
  padding: 14px 28px;
  font-size: 14px;
  background: var(--th-cyan) !important;
  color: #fff !important;
}

.tp-about-2-signature .tp-btn::before {
  background: var(--th-cyan-dark) !important;
}

.tp-about-2-signature .tp-btn:hover {
  color: #fff !important;
}

/* About — hotline call icon */
.tp-about-4-call-icon a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: var(--th-cyan-light) !important;
  color: var(--th-cyan) !important;
  display: inline-block;
  font-size: 18px;
  transition: all 0.3s ease;
}

.tp-about-4-call-icon a:hover {
  background: var(--th-cyan) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 174, 239, 0.4);
  transform: scale(1.08);
}

.tp-about-4-call-number span {
  font-size: 13px;
  color: #888;
  display: block;
}

.tp-about-4-call-number a {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

/* ============================================
   MISCELLANEOUS
   ============================================ */

/* Selection highlight */
*::-moz-selection {
  background: var(--th-cyan) !important;
  color: var(--tp-common-white) !important;
}

::selection {
  background: var(--th-cyan) !important;
  color: var(--tp-common-white) !important;
}

/* Scrollbar (webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--th-cyan-light);
}

::-webkit-scrollbar-thumb {
  background: var(--th-cyan);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--th-cyan-dark);
}

.tp-header-2-main-menu>nav>ul>li:not(:last-child) {
  margin-right: 40px;
}

.tp-cta-4-setion-title .tp-section-title {
  font-size: 50px;
  color: var(--tp-common-black);
}

/* Blog title - giới hạn 2 dòng */
.tp-blog-content-inner-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Blog cards: equal-height layout */
.tp-blog-4-area .row>[class*="col-"] {
  display: flex;
}

.tp-blog-4-area .tp-blog-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tp-blog-4-area .tp-blog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tp-blog-4-area .tp-blog-content-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tp-blog-4-area .tp-blog-content-inner .tp-blog-btn {
  margin-top: auto;
}

/* Fixed height: heading = 2 dòng, description = 3 dòng */
.tp-blog-4-area .tp-blog-content-inner-heading {
  height: 2.8em;
  /* 2 × line-height 1.4 */
}

.tp-blog-4-area .tp-blog-content-inner p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
  height: 4.8em;
  /* 3 × line-height 1.6 */
}

.tp-blog-content {
  padding: 15px 4px 15px;
}

/* Blog section — heading nhỏ gọn */
.th-blog-heading {
  font-size: 32px !important;
  text-transform: none;
}

/* Blog slider nav buttons */
.th-blog-prev,
.th-blog-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: transparent;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.th-blog-prev:hover,
.th-blog-next:hover {
  background: #00AEEF;
  border-color: #00AEEF;
  color: #fff;
}

/* Blog "Xem tất cả" button nhỏ gọn hơn */
.th-blog-viewall {
  padding: 12px 28px !important;   /* = mẫu .tp-btn (SẢN PHẨM NỔI BẬT) */
  font-size: 16px !important;
}

/* Blog Thumbnail cố định chiều cao & cắt hình chuẩn */
.tp-blog-thumb {
  height: 240px !important;
  overflow: hidden !important;
}

.tp-blog-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.tp-blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Blog meta: danh mục trái — ngày phải */
.tp-blog-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.tp-blog-date span {
  margin-left: 0;
}


.th-blog-cat {
  display: inline-block;
  background: rgba(0, 174, 239, 0.1);
  color: #00AEEF;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.tp-blog-wrapper:hover .th-blog-cat {
  background: #00AEEF;
  color: #fff;
}

.th-blog-time {
  font-size: 13px;
  color: #888;
  font-weight: 400;
}

.th-blog-time::before {
  content: "\f073";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 400;
  margin-right: 5px;
  font-size: 12px;
}

/* Blog "Xem thêm" button */
/* .tp-blog-btn: GIỮ NGUYÊN kiểu link chữ + mũi tên → (dùng ở TRANG TRONG: tin
   tức, dịch vụ, tìm kiếm — user yêu cầu không đụng). */
.tp-blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00AEEF;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: all 0.3s ease;
}

.tp-blog-btn::after {
  content: "→";
  display: inline-block;
  transition: transform 0.3s ease;
}

.tp-blog-btn::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #00AEEF;
  transition: width 0.3s ease;
}

.tp-blog-btn:hover {
  color: #EC008C;
}

.tp-blog-btn:hover::after {
  transform: translateX(4px);
}

.tp-blog-btn:hover::before {
  width: 100%;
  background: #EC008C;
}

/* CHỈ TRANG CHỦ (khối "Bài viết mới nhất" .th-blog-section): nút "Xem thêm" đổi
   thành NÚT CYAN ĐẶC giống mẫu .tp-btn ở SẢN PHẨM NỔI BẬT. Trang trong giữ link. */
.th-blog-section .tp-blog-btn {
  justify-content: center;
  position: static;
  background: #00AEEF;
  color: #fff;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  padding: 12px 28px;
  border-radius: 8px;
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.th-blog-section .tp-blog-btn::after,
.th-blog-section .tp-blog-btn::before {
  display: none !important;
}
.th-blog-section .tp-blog-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 0 0 200px rgba(0, 0, 0, 0.14);
}
@media (max-width: 767px) {
  .th-blog-section .tp-blog-btn,
  .th-blog-viewall {
    padding: 8px 24px !important;
    line-height: 20px !important;
    font-size: 15px !important;
  }
}

/* TESTIMONIAL ROLE */
.tp-testimonial-5-role {
  display: block;
  font-size: 14px;
  color: #888;
  margin-top: 4px;
}

/* TESTIMONIAL AVATAR */
.tp-testimonial-5-thumb .img-avatar-user {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================
   Section backgrounds — tạo nhịp sáng/tối
   ============================================ */

/* Testimonial & Brand — nền cyan cực nhạt */
.tp-testimonial-5-area,
.tp-brand-4-area {
  background: linear-gradient(180deg, #E8F8FF 0%, #F4FBFF 100%);
}

/* ============================================
   UX/UI Enhancements (Micro-interactions, CTA, Typography)
   ============================================ */

/* P3: CTA Buttons Glow Effect */
.tp-btn-red {
  box-shadow: 0 4px 15px rgba(236, 0, 140, 0.2);
  /* CMY Magenta glow */
  transition: all 0.3s ease;
}

/* P2: Micro-interactions for Choose-us and FAQ */
.tp-choose-us-feature-wrapper {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: #FFD525;
  border-radius: 12px;
  padding: 30px 15px;
  /* Ensure there is some padding for background to look good */
}

.tp-faq-5-accordion-item {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* Apply hover effects ONLY on devices that support hover (not touchscreens) */
@media (hover: hover) {
  .tp-btn-red:hover {
    box-shadow: 0 8px 25px rgba(236, 0, 140, 0.4);
    transform: translateY(-2px);
  }

  .tp-choose-us-feature-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .tp-faq-5-accordion-item:hover {
    box-shadow: 0 4px 15px rgba(0, 174, 239, 0.1);
    /* CMY Cyan tint */
    border-color: rgba(0, 174, 239, 0.2);
  }
}

/* P2: Typography Consistency */
.tp-section-title {
  text-transform: none !important;
  /* Allow natural casing to avoid weird capitalization like "in ấn" -> "In Ấn" */
}

.tp-section-sub-title {
  text-transform: uppercase !important;
  letter-spacing: 2px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-widget-cutm-pdg-3 {
    margin-left: 0;
    padding-left: 0px;
  }
}

@media (max-width: 767px) {
  .tp-cta-4-setion-title .tp-section-title {
    font-size: 36px !important;
  }

  .tp-faq-5-area .tp-section-title {
    font-size: 30px !important;
  }

  /* Fix About Area Signature to be horizontal on mobile */
  .tp-about-2-signature {
    flex-direction: row !important;
    align-items: center !important;
  }

  .tp-about-2-signature .tp-about-4-call-item {
    margin-top: 0 !important;
    margin-left: 20px !important;
    /* Reduce spacing slightly to fit both on screen */
  }
}

/* Custom Contact Cards */
.tp-contact-card {
  background: #ffffff;
  padding: 45px 35px;
  border-radius: 12px;
  position: relative;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #eaeaea;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

.tp-contact-card:hover {
  background: #6200ea;
  /* Màu tím theo yêu cầu */
  border-color: #6200ea;
  box-shadow: 0 10px 30px rgba(98, 0, 234, 0.3);
  transform: translateY(-5px);
}

.tp-contact-card:hover .tp-contact-card-title,
.tp-contact-card:hover .tp-contact-card-subtitle,
.tp-contact-card:hover .tp-contact-card-info p {
  color: #ffffff;
}

.tp-contact-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 35px;
}

.tp-contact-card-icon {
  width: 65px;
  height: 65px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #6200ea;
  /* Màu tím */
  margin-right: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.tp-contact-card:hover .tp-contact-card-icon {
  color: #6200ea;
}

.tp-contact-card-title-wrap {
  text-align: left;
}

.tp-contact-card-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #000000;
}

.tp-contact-card-subtitle {
  font-size: 14px;
  color: #303030;
  margin-bottom: 0;
}

.tp-contact-card-info {
  text-align: left;
}

.tp-contact-card-info p {
  font-size: 16px;
  color: #303030;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.6;
}

.tp-contact-card-info p:last-child {
  margin-bottom: 0;
}

.tp-contact-card-arrow {
  position: absolute;
  bottom: 35px;
  right: 35px;
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6200ea;
  font-size: 18px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.tp-contact-card-arrow:hover {
  background: #FFCC29;
  color: #1F2F05;
}

.tp-contact-card:hover .tp-contact-card-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.tp-contact-card:hover .tp-contact-card-info p {
  color: rgba(255, 255, 255, 0.9);
}

.tp-breadcrumb-area {
  display: flex;
  align-items: flex-end;              /* đẩy chữ xuống gần mép dưới */
  padding: 380px 0 20px;             /* chữ cách đáy ~35px (giữ nguyên chiều cao banner) */
  background: #edeef2;
}

/* C: viền sáng quanh chữ -> chữ đen luôn đọc rõ dù nằm trên ảnh nền busy */
.tp-breadcrumb-title {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 2px 12px rgba(255, 255, 255, 0.9), 0 0 22px rgba(255, 255, 255, 0.7);
}
.tp-breadcrumb-body,
.tp-breadcrumb-body a,
.tp-breadcrumb-body span {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 1px 7px rgba(255, 255, 255, 0.9);
}

/* Fix Tag Cloud Hover Text Color */
.tagcloud a:hover,
.tp-postbox-tagcloud-social a:hover {
  color: #ffffff !important;
  background-color: var(--th-cyan) !important;
  border-color: var(--th-cyan) !important;
}

/* ============================================
   Shop Page — Breadcrumb
   ============================================ */
.th-shop-breadcrumb {
  text-align: left;
  padding-left: 20px;
}

.th-shop-breadcrumb .tp-breadcrumb-title {
  font-size: 56px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin-bottom: 10px !important;
}

.th-shop-breadcrumb .tp-breadcrumb-body {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-transform: uppercase !important;
}

.th-shop-breadcrumb .tp-breadcrumb-body a.home {
  color: #000000 !important;
  text-decoration: none !important;
}

.th-shop-breadcrumb .tp-breadcrumb-body a.home:hover {
  color: var(--th-cyan) !important;
}

.th-shop-breadcrumb .tp-breadcrumb-body .spacing {
  margin: 0 5px;
}

.th-shop-breadcrumb .tp-breadcrumb-body .th-breadcrumb-current {
  color: var(--th-cyan) !important;
}

/* ============================================
   Banner trang con (breadcrumb)
   - Da bo cac hinh trang tri goc cua template (shape 1,2,3,4)
   - Chi con 1 anh banner upload (shape-5), cho phu FULL chieu rong
     de khong lo dai nen xam ben trai tren man hinh rong
   ============================================ */
.tp-breadcrumb-bg-shape-5 {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* ============================================
   Pagination — Square style (Thiên Hà branded)
   Override main.css .tp-postbox-pagination
   ============================================ */
.tp-postbox-pagination {
  text-align: center !important;
}

.tp-postbox-pagination nav ul {
  display: inline-flex !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  align-items: center !important;
}

.tp-postbox-pagination nav ul li {
  display: inline-block !important;
  margin-right: 0 !important;
}

.tp-postbox-pagination nav ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--tp-heading-primary, #000) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease-out !important;
  border: 1px solid #e6e6e6 !important;
  text-decoration: none !important;
}

.tp-postbox-pagination nav ul li a:hover {
  background-color: var(--th-cyan) !important;
  color: #ffffff !important;
  border-color: var(--th-cyan) !important;
}

.tp-postbox-pagination nav ul li a.active {
  background-color: var(--th-cyan) !important;
  color: #ffffff !important;
  border-color: var(--th-cyan) !important;
}

.tp-postbox-pagination nav ul li a i {
  font-size: 16px !important;
  color: inherit !important;
}

/* ============================================
   Shop Sidebar — Utilities
   ============================================ */

/* Truncate text to 2 lines with ellipsis */
.th-line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sidebar product price */
.th-sidebar-price {
  color: var(--th-magenta) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 4px;
  display: inline-block;
}


@media (max-width: 767px) {
  .sidebar__widget {
    padding: 0px 0px;
  }
}


/* ========================================
   ABOUT SECTION IMAGE - About Page
   ======================================== */
.th-about-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: block;
}

.tp-about-area .tp-about-thumb {
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
}

.tp-about-area .tp-about-right-wrapper .tp-section-paragraph {
  line-height: 1.8;
}

/* ========================================
   BRAND AREA - About Page
   ======================================== */
.tp-brand-3-item {
  text-align: center;
}

.tp-brand-3-img-thum {
  padding: 25px 15px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  margin: 0 auto;
  width: 100%;
}

.tp-brand-3-img-thum img {
  max-height: 50px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

/* ========================================
   GALLERY PAGE — PinkBakery Style
   ======================================== */

/* Filter Buttons */
.th-gallery-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.th-filter-btn {
  background: transparent;
  border: 2px solid #e0e0e0;
  padding: 10px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #303030;
  cursor: pointer;
  transition: all 0.3s ease;
}

.th-filter-btn:hover {
  border-color: var(--th-cyan, #00AEEF);
  color: var(--th-cyan, #00AEEF);
}

.th-filter-btn.active {
  background: var(--th-cyan, #00AEEF);
  border-color: var(--th-cyan, #00AEEF);
  color: #fff;
}

/* Hidden state for filtered items */
.th-gallery-card.th-hidden {
  display: none;
}

/* Main Grid — 6 column system */
.th-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

/* Size variants */
.th-g-sm {
  grid-column: span 1;
}

.th-g-md {
  grid-column: span 2;
}

.th-g-lg {
  grid-column: span 2;
  grid-row: span 2;
}

/* Card */
.th-gallery-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}

.th-gallery-card img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.th-g-lg img {
  min-height: 420px;
}

/* Overlay */
.th-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease;
}

.th-gallery-card:hover .th-gallery-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.th-gallery-card:hover img {
  transform: scale(1.05);
}

/* Icon */
.th-gallery-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 18px;
  transform: scale(0);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.th-gallery-card:hover .th-gallery-icon {
  transform: scale(1);
  opacity: 1;
}

/* Link */
.th-gallery-popup {
  display: block;
  position: relative;
  height: 100%;
}

/* Responsive — tablet */
@media (max-width: 991px) {
  .th-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .th-g-sm {
    grid-column: span 1;
  }

  .th-g-md {
    grid-column: span 1;
  }

  .th-g-lg {
    grid-column: span 1;
    grid-row: span 1;
  }

  .th-g-lg img {
    min-height: 200px;
  }

  .th-gallery-card {
    border-radius: 14px;
  }
}

/* Responsive — mobile */
@media (max-width: 575px) {
  .th-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .th-gallery-card img {
    min-height: 140px;
  }

  .th-gallery-card {
    border-radius: 12px;
  }

  .th-gallery-icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .th-filter-btn {
    padding: 8px 18px;
    font-size: 13px;
  }

  .th-gallery-filter-wrap {
    gap: 6px;
  }
}

/* Fix: Social icon hover — ensure <i> inherits white color */
.tpoffcanvas__social .social-icon a:hover i {
  color: var(--tp-common-white, #fff);
}

/* Fix: Slider social links hover */
.tp-slider-5-social a:hover i {
  color: var(--tp-common-white, #fff);
}

.tp-breadcrumb-title {
  letter-spacing: 0px;
}

/* ============================================
   Rich Text Content Images (Responsive Fix)
   Fix for large images breaking out of the container
   ============================================ */
.tp-postbox-paragraph img,
.tp-postbox-paragraph figure img,
.tp-postbox-paragraph iframe {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  /* Optional: adds a nice soft corner to content images */
}

.product-popup__modal .modal-content {
  padding: 25px;
  border-radius: 0;
}

/* ============================================
   PRODUCT QUICK VIEW MODAL - Compact Spacing
   ============================================ */
.product-popup__details-wrapper p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
  color: #303030;
}

.product-popup__details-stock {
  margin-bottom: 6px;
}

.product-popup__details-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

.product-popup__details-price {
  margin-bottom: 0 !important;
}

.product-popup__details-more {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f0f0f0;
}

.product-popup__details-more p {
  margin-bottom: 2px !important;
  font-size: 13px;
  color: #888;
}

/* Quantity + Button cùng dòng */
.product-popup__details-action {
  gap: 12px;
}

.product-popup__details-action .tp-product-popup-quantity {
  flex-shrink: 0;
}

.product-popup__details-action .product-popup-add-cart-btn {
  flex: 1;
}

/* ── Custom Modern Dropdown Menu (1-column, replacing theme default) ── */
.tp-header-main-menu>nav>ul .submenu {
  width: max-content !important;
  min-width: 240px !important;
  max-width: 480px !important;
  padding: 8px 0 !important;
  /* padding for the dropdown box */
  border-radius: 6px;
  border-top: 4px solid var(--tp-theme-primary);
  /* slightly thinner top border */
}

/* Base style for list items */
.tp-header-main-menu>nav>ul .submenu>li {
  margin: 0 !important;
  padding: 2px 12px;
  /* reduced gap between items inside the dropdown */
}

/* Remove default dash before */
.tp-header-main-menu>nav>ul .submenu>li>a::before,
.tp-header-main-menu>nav>ul .submenu>li>a::after {
  display: none !important;
}

/* Modern clean link style */
.tp-header-main-menu>nav>ul .submenu>li>a {
  display: block;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 5px 20px !important;
  /* tighter vertical padding, wider horizontal padding */
  margin: 0 !important;
  /* reset margin shift */
  font-size: 15px;
  font-weight: 600;
  /* slightly bolder as requested */
  color: var(--tp-heading-primary);
  border-radius: 4px;
  text-transform: none;
  /* or capitalize */
  transition: all 0.2s ease-in-out;
  border-left: 0px solid transparent;
}

/* Hover & Active block style */
.tp-header-main-menu>nav>ul .submenu>li>a:hover,
.tp-header-main-menu>nav>ul .submenu>li>a.active {
  background-color: #f0f8ff !important;
  /* Light blue highlight */
  color: var(--tp-theme-primary) !important;
  border-left: 3px solid var(--tp-theme-primary);
  padding-left: 17px !important;
  /* keep total width same: 20 - 3 = 17 */
  margin-left: 0 !important;
  /* fix theme shift */
}

/* User Request: Resize H2 and H3 for article, product, and service detail pages */
.product__details-description-paragraph h2,
.tp-postbox-paragraph h2,
.tp-postbox-content h2 {
  font-size: 35px;
  margin-bottom: 20px;
}

.product__details-description-paragraph h3,
.tp-postbox-paragraph h3,
.tp-postbox-content h3 {
  font-size: 25px;
  margin-bottom: 15px;
  margin-top: 25px;
}

/* ============================================
   PREMIUM FEATURE SECTION (RE-DESIGN - MINIMALIST VERTICAL)
   ============================================ */
.th-premium-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  background: transparent;
  border: none !important;
  border-radius: 0;
  padding: 10px 10px;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Bỏ border highlight trên đầu */
.th-premium-feature-card::before {
  display: none !important;
}

.th-premium-feature-card:hover {
  transform: translateY(-8px);
}

/* Mascot Image container - BIGGER, borderless and beautiful */
.th-feature-mascot-container {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
  background: #f8fbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 174, 239, 0.06);
  margin-bottom: 8px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.th-feature-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.th-premium-feature-card:hover .th-feature-mascot-container {
  transform: scale(1.08) rotate(3deg);
  background: var(--th-cyan-light);
  border-color: rgba(0, 174, 239, 0.15);
  box-shadow: 0 8px 24px rgba(0, 174, 239, 0.12);
}

/* Đổi màu nền hover nhẹ nhàng theo CMY cho container mascot */
.th-premium-feature-card.card-magenta:hover .th-feature-mascot-container {
  background: var(--th-magenta-light);
  border-color: rgba(236, 0, 140, 0.15);
  box-shadow: 0 8px 24px rgba(236, 0, 140, 0.12);
}

.th-premium-feature-card.card-yellow:hover .th-feature-mascot-container {
  background: #fffae0;
  border-color: rgba(255, 214, 0, 0.2);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.12);
}

.th-premium-feature-card:hover .th-feature-mascot-img {
  transform: scale(1.12);
}

/* Feature content - To ra một chút */
.th-premium-feature-content {
  width: 100%;
}

.th-premium-feature-content h2 {
  font-family: var(--tp-ff-heading, "Google Sans Flex", sans-serif);
  font-weight: 700;
  font-size: 18px;
  /* Tăng từ 16px lên 18px */
  color: #000000;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.th-premium-feature-card:hover .th-premium-feature-content h2 {
  color: var(--th-cyan);
}

.th-premium-feature-card.card-magenta:hover .th-premium-feature-content h2 {
  color: var(--th-magenta);
}

.th-premium-feature-card.card-yellow:hover .th-premium-feature-content h2 {
  color: #d4b200;
}

.th-premium-feature-content p {
  font-family: var(--tp-ff-body, system-ui, sans-serif);
  font-size: 14.5px;
  /* Tăng từ 13px lên 14.5px */
  color: #303030;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Mobile xếp 3 cột (col-4, <768px) -> thu nhỏ mascot + chữ, BỎ mô tả cho gọn,
   chỉ giữ tiêu đề 2 dòng căn đều -> các ô cân nhau, đẹp hơn. */
@media (max-width: 767px) {
  /* Bớt khoảng cách dọc giữa/dưới các ô (mb-30 = 30px dư ở 3 cột nhỏ) -> 14px */
  .tp-feature-5-area .mb-30 {
    margin-bottom: 14px !important;
  }

  .th-premium-feature-card {
    padding: 10px 2px;
    gap: 6px;
  }

  .th-feature-mascot-container {
    width: 82px;
    height: 82px;
    border-radius: 16px;
    margin-bottom: 4px;
  }

  /* Bỏ dòng mô tả dưới (Thiết kế trọn gói / Hotline... / ...) trên mobile */
  .th-premium-feature-content p {
    display: none;
  }

  /* Chỉ còn tiêu đề: 12px để tiêu đề dài ("Quy trình chuyên nghiệp") gọn 2 dòng;
     khoá 2 dòng (min-height) + canh giữa -> mọi ô cao bằng nhau */
  .th-premium-feature-content h2 {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 0;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* 5 Columns Grid Responsive for Feature Area */
@media (min-width: 1200px) {
  .col-xl-5-cols {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .col-lg-5-cols {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ============================================
   CHOOSE US SECTION (MASCOT REDESIGN)
   ============================================ */
.tp-choose-us-feature-icon span {
  width: 150px !important;
  height: 150px !important;
  border-radius: 0 !important;
  /* Loại bỏ bo tròn khung */
  overflow: visible !important;
  background: transparent !important;
  /* Nền trong suốt */
  box-shadow: none !important;
  /* Loại bỏ hoàn toàn bóng đổ của khung */
  border: none !important;
  /* Loại bỏ hoàn toàn viền của khung */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  /* Loại bỏ đệm lề */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.tp-choose-us-feature-icon span::before {
  display: none !important;
  /* Bỏ viền dashed cũ */
}

/* Mascot image style - hòa quyện 100% vào nền card trắng */
.tp-choose-us-feature-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Đảm bảo hình ảnh mascot hiển thị trọn vẹn 100% */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-icon span {
  transform: scale(1.08) rotate(3deg) !important;
}

.tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-icon img {
  transform: scale(1.06) !important;
}

/* Loại bỏ các bóng đổ xen kẽ cũ vì khung đã trong suốt */
.tp-choose-us-bottom .row>div:nth-child(2) .tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-icon span,
.tp-choose-us-bottom .row>div:nth-child(3) .tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-icon span,
.tp-choose-us-bottom .row>div:nth-child(4) .tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-icon span {
  box-shadow: none !important;
}

/* Tối ưu hóa typography phần Choose Us */
.tp-choose-us-feature-title {
  font-family: var(--tp-ff-heading, "Google Sans Flex", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #000000 !important;
  margin-bottom: 12px !important;
  transition: color 0.3s ease !important;
  display: inline-block;
}

.tp-choose-us-feature-title a {
  color: #000000 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-title a {
  color: var(--th-cyan) !important;
}

.tp-choose-us-bottom .row>div:nth-child(2) .tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-title a {
  color: var(--th-magenta) !important;
}

.tp-choose-us-bottom .row>div:nth-child(3) .tp-choose-us-feature-wrapper:hover .tp-choose-us-feature-title a {
  color: #000000 !important;
}

.tp-choose-us-feature-paragraph {
  font-family: var(--tp-ff-body, system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  color: #303030 !important;
  line-height: 1.6 !important;
}

/* Điều chỉnh Choose Us Mascot trên Mobile để tránh tràn màn hình và hiển thị lưới 2x2 cực đẹp */
@media (max-width: 575px) {
  .tp-choose-us-feature-icon span {
    width: 100px !important;
    height: 100px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }

  .tp-choose-us-feature-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .tp-choose-us-feature-paragraph {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================
   MEGA MENU FOR PRODUCTS
   ============================================ */
.has-megamenu {
  position: static !important;
}

.tp-header-main-menu nav>ul {
  position: relative !important;
}

.tp-megamenu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 900px;
  background: var(--tp-common-white) !important;
  box-shadow: 0 15px 40px rgba(0, 174, 239, 0.12) !important;
  border-top: 4px solid var(--th-cyan) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 30px !important;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(15px);
  z-index: 999 !important;
}

/* Kích hoạt hiển thị khi hover */
.has-megamenu:hover .tp-megamenu-wrapper {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.megamenu-column {
  padding: 0 15px;
}

.megamenu-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--th-cyan) !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--th-cyan-light) !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.megamenu-column ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.megamenu-column ul li {
  margin-bottom: 12px !important;
  width: 100% !important;
  display: block !important;
}

.megamenu-column ul li a {
  font-size: 14.5px !important;
  color: #333333 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  background: transparent !important;
}

.megamenu-column ul li a i {
  font-size: 12px !important;
  color: #bbbbbb !important;
  transition: all 0.25s ease !important;
}

.megamenu-column ul li a:hover {
  color: var(--th-magenta) !important;
  padding-left: 6px !important;
}

.megamenu-column ul li a:hover i {
  color: var(--th-magenta) !important;
  transform: translateX(2px) !important;
}

/* Hover HONG cho menu con (Gioi thieu / Dich vu / Tin tuc) - giong mega menu San pham */
.tp-header-main-menu ul li .submenu.tp-submenu li a:hover,
.tp-header-main-menu > nav > ul .submenu > li > a:hover {
  color: var(--th-magenta) !important;
}
.tp-header-main-menu > nav > ul .submenu > li > a:hover::before {
  background: var(--th-magenta) !important;
}

/* Banner trong Mega Menu */
.megamenu-banner-wrapper {
  background: var(--th-cyan-light) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  text-align: center !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border: 1px dashed var(--th-cyan) !important;
}

.megamenu-mascot-img {
  height: 110px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.megamenu-banner-wrapper:hover .megamenu-mascot-img {
  transform: scale(1.1) rotate(3deg) !important;
}

.megamenu-banner-text h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--th-cyan-dark) !important;
  margin-bottom: 6px !important;
}

.megamenu-banner-text p {
  font-size: 13px !important;
  color: #303030 !important;
  margin-bottom: 15px !important;
}

.megamenu-banner-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--th-magenta) !important;
  color: var(--tp-common-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.megamenu-banner-btn:hover {
  background: var(--th-magenta-dark) !important;
  color: var(--tp-common-white) !important;
  box-shadow: 0 4px 10px rgba(236, 0, 140, 0.3) !important;
}

/* ============================================
   RESPONSIVE CONTROLLER FOR MENU
   ============================================ */
@media (max-width: 1199px) {
  .th-desktop-only {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .th-mobile-only {
    display: none !important;
  }
}

/* ============================================
   PRODUCT DETAIL TABS (PREMIUM DESIGN)
   ============================================ */
.th-product-tabs-wrapper {
  margin-top: 30px;
  background: var(--tp-common-white);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 174, 239, 0.05);
  border: 1px solid #f0f0f0;
}

.th-product-nav-tabs {
  border-bottom: 2px solid #f0f0f0 !important;
  display: flex !important;
  gap: 30px;
  padding-bottom: 0;
  margin-bottom: 30px;
}

.th-product-nav-tabs .nav-item {
  margin-bottom: -2px;
}

.th-product-nav-tabs .nav-link {
  font-family: var(--tp-ff-heading, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #303030 !important;
  background: transparent !important;
  border: none !important;
  padding: 12px 10px 16px 10px !important;
  position: relative;
  transition: all 0.3s ease !important;
}

.th-product-nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--th-magenta);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
}

.th-product-nav-tabs .nav-link.active {
  color: var(--th-magenta) !important;
}

.th-product-nav-tabs .nav-link.active::after {
  transform: scaleX(1);
}

.th-product-nav-tabs .nav-link:hover {
  color: var(--th-cyan) !important;
}

.th-product-tab-content {
  padding-top: 10px;
}

/* Tab 2: Printing Notes Grid */
.th-printing-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.th-printing-note-card {
  background: #f8f9fc;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #eaeaea;
  transition: all 0.3s ease;
}

.th-printing-note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  border-color: #d0d0d0;
}

.note-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.note-card-icon.cmy-cyan {
  background: var(--th-cyan-light);
  color: var(--th-cyan);
}

.note-card-icon.cmy-magenta {
  background: #FFF0F8;
  color: var(--th-magenta);
}

.note-card-icon.cmy-yellow {
  background: #FFFBE6;
  color: #D4B106;
}

.note-card-icon.cmy-black {
  background: #EAEAEA;
  color: #333333;
}

.note-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 10px !important;
}

.note-card-desc {
  font-size: 14px !important;
  color: #303030 !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Tab 3: Reviews Layout */
.th-review-summary-box {
  background: #FFF0F8;
  border-radius: 10px;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(236, 0, 140, 0.1);
}

.summary-score {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--th-magenta) !important;
  margin-bottom: 6px !important;
}

.summary-stars {
  color: #FFD600;
  font-size: 18px;
  margin-bottom: 12px;
}

.summary-count {
  font-size: 13px !important;
  color: #303030 !important;
  margin-bottom: 24px !important;
}

.summary-bars-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #303030;
}

.bar-label {
  flex: 0 0 45px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bar-label i {
  color: #FFD600;
}

.bar-track {
  flex: 1;
  height: 6px;
  background: #EAEAEA;
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #FFD600;
  border-radius: 10px;
}

.bar-percent {
  flex: 0 0 30px;
  text-align: right;
}

/* Reviews List */
.th-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.th-review-item {
  background: var(--tp-common-white);
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.th-review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-user-info .user-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 4px !important;
}

.review-user-info .review-date {
  font-size: 12px !important;
  color: #999999 !important;
}

.review-stars-given {
  color: #FFD600;
  font-size: 14px;
}

.review-text {
  font-size: 14px !important;
  color: #444444 !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* Review Form */
.th-review-form-wrapper {
  background: #f8f9fc;
  border-radius: 10px;
  padding: 30px 24px;
  border: 1px solid #eaeaea;
}

.th-review-form-wrapper .form-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 20px !important;
}

.th-form-input {
  background: var(--tp-common-white) !important;
  border: 1px solid #eaeaea !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #333333 !important;
  transition: all 0.25s ease !important;
}

.th-form-input:focus {
  border-color: var(--th-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important;
}

.th-review-submit-btn {
  background: var(--th-magenta) !important;
  color: var(--tp-common-white) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

.th-review-submit-btn:hover {
  background: var(--th-magenta-dark) !important;
  box-shadow: 0 4px 12px rgba(236, 0, 140, 0.3) !important;
}

/* Tab mới: Bảng giá & File mẫu in */
.th-download-price-wrapper {
  background: var(--tp-common-white);
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #eaeaea;
}

.th-download-price-wrapper .download-title,
.th-download-templates-wrapper .download-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 6px !important;
}

.th-download-price-wrapper .download-subtitle,
.th-download-templates-wrapper .download-subtitle {
  font-size: 13px !important;
  color: #888888 !important;
  margin-bottom: 20px !important;
}

.price-document-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f9fc;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
}

.price-document-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border-color: #d0d0d0;
}

.price-document-card .doc-icon {
  width: 50px;
  height: 50px;
  background: #FF3B30;
  /* Adobe PDF Red */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(255, 59, 48, 0.2);
}

.price-document-card .doc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-document-card .doc-info h6 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 0 !important;
}

.price-document-card .doc-info p {
  font-size: 12px !important;
  color: #888888 !important;
  margin-bottom: 0 !important;
}

.price-download-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-download-actions .tp-btn {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

.th-btn-download-pdf {
  background: var(--th-magenta) !important;
  color: #ffffff !important;
}

.th-btn-download-pdf:hover {
  background: var(--th-magenta-dark) !important;
  box-shadow: 0 4px 12px rgba(236, 0, 140, 0.3) !important;
}

.th-btn-download-xlsx {
  background: #217346 !important;
  color: #ffffff !important;
}

.th-btn-download-xlsx:hover {
  background: #1e663e !important;
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.3) !important;
}

.pricing-note {
  font-size: 12.5px !important;
  color: #303030 !important;
  line-height: 1.5 !important;
  background: #fffcf0;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 3px solid #ffd600;
}

/* Download Templates styles */
.th-download-templates-wrapper {
  background: var(--tp-common-white);
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #eaeaea;
}

.template-download-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f9fc;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.template-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border-color: #d0d0d0;
}

.file-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
  flex-shrink: 0;
}

.file-icon.ai-format {
  background: #FF9F00;
  /* Adobe Illustrator Orange */
}

.file-icon.psd-format {
  background: #00C8FF;
  /* Adobe Photoshop Blue */
}

.file-icon.pdf-format {
  background: #FF3B30;
  /* Adobe Acrobat Red */
}

.file-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.file-details .file-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #333333 !important;
}

.file-details .file-info {
  font-size: 12px !important;
  color: #888888 !important;
}

.btn-download-file {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303030;
  transition: all 0.25s ease;
}

.btn-download-file:hover {
  background: var(--th-magenta) !important;
  color: #ffffff !important;
  border-color: var(--th-magenta) !important;
  box-shadow: 0 4px 10px rgba(236, 0, 140, 0.2);
}

.download-support-box {
  background: #FFF0F8;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(236, 0, 140, 0.08);
}

.download-support-box h6 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--th-magenta) !important;
  margin-bottom: 6px !important;
}

.download-support-box p {
  font-size: 12px !important;
  color: #303030 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.bg-success-light {
  background-color: #E6F7ED !important;
}

.th-captcha-wrapper {
  margin-top: 5px;
}

.btn-refresh-captcha {
  transition: transform 0.3s ease;
}

.btn-refresh-captcha:hover {
  transform: rotate(180deg);
}

.th-rich-text-notes p {
  font-size: 14.5px !important;
  color: #303030 !important;
  line-height: 1.6 !important;
}

.th-rich-text-notes h5 {
  font-family: var(--tp-ff-heading, system-ui, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Responsive */
@media (max-width: 991px) {
  .th-printing-notes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .th-product-nav-tabs {
    gap: 15px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .th-product-nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .th-product-nav-tabs .nav-link {
    font-size: 14px !important;
    white-space: nowrap;
    padding: 10px 5px !important;
  }

  .th-product-tabs-wrapper {
    padding: 15px;
  }
}

/* ============================================
   GLOBAL PRODUCT CARD RE-DESIGN (PREMIUM STYLE)
   ============================================ */
.th-featured-shop .product__content {
  text-align: left !important;
  padding: 15px 20px 20px 20px !important;
}

.th-featured-shop .product__category-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #999999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 5px !important;
}

.th-featured-shop .product__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

.th-featured-shop .product__title a {
  color: #000000 !important;
}

.th-featured-shop .product__title a:hover {
  color: var(--th-magenta) !important;
}

.th-featured-shop .product__rating-stars {
  color: #FFD600 !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 5px !important;
}

.th-featured-shop .product__rating-stars span {
  color: #888888 !important;
  font-size: 11px !important;
  margin-left: 5px !important;
  font-weight: 500 !important;
}

.th-featured-shop .product__price-label {
  font-size: 13px !important;
  color: #303030 !important;
  font-weight: 500 !important;
  text-align: left !important;
  margin-bottom: 5px !important;
}

.th-featured-shop .th-product-price {
  text-align: left !important;
  margin-top: 5px !important;
}

.th-featured-shop .th-product-price span,
.th-featured-shop .th-product-price .price-sale {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--th-magenta) !important;
}

.th-featured-shop .th-product-price .price-original {
  font-size: 13px !important;
  color: #999999 !important;
  margin-left: 8px !important;
  text-decoration: line-through !important;
}

/* ============================================
   PRODUCT SIDEBAR STYLE
   ============================================ */
.tp-shop-sidebar-sell-item-thumb {
  width: 80px !important;
  height: 80px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  margin-right: 15px !important;
}

.tp-shop-sidebar-sell-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tp-shop-sidebar-sell-item-content {
  flex-grow: 1 !important;
}

.tp-shop-sidebar-sell-item-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
}

.tp-shop-sidebar-sell-item-title a {
  color: #000000 !important;
  transition: color 0.2s ease !important;
}

.tp-shop-sidebar-sell-item-title a:hover {
  color: var(--th-magenta) !important;
}

.th-sidebar-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

.th-sidebar-price span {
  color: var(--th-magenta) !important;
}

.th-sidebar-price .price-original {
  color: #999999 !important;
  font-size: 12px !important;
  margin-left: 6px !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}

.th-sidebar-empty {
  color: #999999 !important;
  font-size: 14px !important;
}

/* ============================================
   PRODUCT DETAIL & QUICKVIEW ELEMENTS
   ============================================ */
.product__details-wrapper .product__category-tag {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--th-cyan) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.product__details-wrapper .product__rating-stars {
  color: #FFD600 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.product__details-wrapper .product__rating-stars span {
  color: #303030 !important;
  font-size: 13px !important;
  margin-left: 6px !important;
  font-weight: 500 !important;
}

.product__details-wrapper .product__price-label {
  font-size: 14px !important;
  color: #303030 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* ============================================
   SALES TEAM SECTION (Minimal)
   ============================================ */

/* Nền phủ toàn bộ section */
.th-sales-team-area {
  overflow: hidden;
}

.th-sales-team-area .tp-blog-2-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.th-sales-team-area .tp-blog-2-bg-shape-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.th-sales-team-area .tp-blog-2-bg-shape-2 {
  top: -40px;
}

/* Text cho nền sáng */
.th-sales-team-area .tp-section-sub-title {
  color: var(--th-magenta) !important;
}

.th-sales-team-area .tp-section-title {
  color: #000000 !important;
}

/* Flex layout thay cho Grid để cân đối dòng cuối */
.th-staff-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 15px;
}

.th-staff-row>.col {
  flex: 0 0 calc(20% - 12px);
  max-width: calc(20% - 12px);
  width: 100%;
}

@media (max-width: 991px) {
  .th-staff-row>.col {
    flex: 0 0 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
  }
}

@media (max-width: 575px) {
  .th-staff-row>.col {
    flex: 0 0 calc(50% - 7.5px);
    max-width: calc(50% - 7.5px);
  }
}

.th-staff-item {
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.th-staff-photo {
  width: 115px;
  height: 115px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
  border: 3px solid rgba(0, 174, 239, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.th-staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.th-staff-placeholder {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.25);
  font-size: 38px;
}

.th-staff-name {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}

.th-staff-role {
  font-size: 14px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 4px;
}

.th-staff-phone {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #000000 !important;
  transition: all 0.2s ease;
}

.th-staff-phone i {
  margin-right: 4px;
  font-size: 12px;
}

.th-staff-phone:hover {
  color: var(--th-cyan, #00AEEF) !important;
}

/* Hiệu ứng hover cho Avatar thêm phần sống động (Wow effect) */
.th-staff-item:hover .th-staff-photo {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--th-magenta, #EC008C) !important;
  box-shadow: 0 6px 20px rgba(236, 0, 140, 0.15);
}

/* Tinh chỉnh Responsive chi tiết cho Mobile */
@media (max-width: 575px) {
  .th-staff-item {
    padding: 15px 5px;
  }
  
  .th-staff-photo {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    border-width: 2.5px;
  }
  
  .th-staff-name {
    font-size: 13px;
    min-height: 36px;
  }
  
  .th-staff-role {
    font-size: 12px;
    min-height: 18px;
  }
  
  .th-staff-phone {
    font-size: 12.5px;
    padding: 3px 6px;
  }
}

/* ============================================
   HERO 2-COLUMN GRID SYSTEM (Slider + Stacked Banners)
   ============================================ */
.th-hero-grid-container {
  display: block;
  width: 100%;
}

.th-hero-slider-main {
  width: 100%;
}

.th-slide-item {
  min-height: 250px !important; /* Mobile height */
  border-radius: 8px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .th-hero-grid-container {
    display: grid !important;
    grid-template-columns: 2.95fr 1fr !important; /* Slide chiếm ~75%, Banners chiếm ~25% */
    gap: 20px !important;
    margin-top: 170px !important;
  }
  
  .th-hero-slider-main {
    min-width: 0; /* Swiper overflow fix in grid */
  }

  .th-slide-item {
    min-height: 460px !important; /* Desktop height */
    border-radius: 12px;
  }

  .th-hero-banners-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 460px; /* Khớp chính xác chiều cao Slider */
  }

  .th-banner-right-item {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
  }

  .th-banner-right-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
    transition: opacity 0.3s ease;
  }

  .th-banner-right-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  .th-banner-right-item:hover::before {
    opacity: 0.8;
  }
  
  .th-banner-right-item.placeholder-banner {
    transition: all 0.3s ease;
  }
  .th-banner-right-item.placeholder-banner:hover {
    filter: brightness(0.95);
    transform: translateY(-4px);
  }
}

@media (min-width: 1200px) {
  .th-slide-item {
    min-height: 500px !important;
  }
  .th-hero-banners-side {
    height: 500px;
  }
}

/* ============================================
   HEADER GLASSMORPHISM MENU EFFECT (Option 2)
   ============================================ */
#header-sticky,
.header-sticky#header-sticky,
.tp-header-5-bottom {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============================================
   TOP CYAN BORDER & SOFT TRACK ORDER TAB
   ============================================ */
.th-top-banner-line {
  position: relative;
  width: 100%;
  height: 3px;
  background: #00AEEF;
  z-index: 120;
}

.th-top-banner-line .container-fluid {
  position: relative;
}

.th-topbar-right-box {
  padding-right: 155px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
}

.th-topbar-item {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.th-topbar-item i {
  margin-right: 6px !important;
  display: inline-block !important;
}

.th-track-order-tab {
  position: absolute;
  top: 0px;
  right: 30px;
  background: #006699;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px 10px 16px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 121;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
}

.th-track-order-tab:hover {
  background: #00557f !important;
  color: #ffffff !important;
  transform: translateY(2px);
  box-shadow: 0 6px 16px rgba(0, 136, 204, 0.35);
}

/* ============================================
   ROTATING TEXT TICKER FOR TOPBAR LEFT
   ============================================ */
.th-topbar-ticker {
  position: relative;
  height: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.th-ticker-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
  font-weight: 700 !important;
  color: #222222 !important;
  animation: thTickerSlide 8s infinite ease-in-out;
}

.th-ticker-item.th-ticker-1 {
  animation-delay: 0s;
}

.th-ticker-item.th-ticker-2 {
  animation-delay: 4s;
}

@keyframes thTickerSlide {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  6%, 44% {
    opacity: 1;
    transform: translateY(0);
  }
  50%, 100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tp-header-5-top {
        padding: 15px 40px 15px 60px !important;
    }
}

/* ============================================
   FLOATING QUICK CONTACT BAR (LEFT CORNER)
   ============================================ */
.th-floating-contact-bar {
  position: fixed;
  left: 20px;
  bottom: 35px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}

.th-floating-item {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  pointer-events: auto;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.th-floating-item:hover {
  transform: scale(1.08) translateX(4px);
}

.th-floating-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.3s ease;
  flex-shrink: 0;
}

/* Hotline Button */
.th-floating-hotline .th-floating-icon {
  background: linear-gradient(135deg, #00AEEF, #0088CC);
}

.th-floating-pulse {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #00AEEF;
  animation: th-pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes th-pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.38);
    opacity: 0;
  }
  100% {
    transform: scale(1.38);
    opacity: 0;
  }
}

/* Zalo Button */
.th-floating-zalo .th-floating-icon {
  background: transparent;
  box-shadow: 0 6px 20px rgba(0, 104, 255, 0.3);
}

/* Messenger Button */
.th-floating-messenger .th-floating-icon {
  background: linear-gradient(135deg, #0084FF, #00C6FF);
}

/* Tooltip / Label */
.th-floating-label {
  position: absolute;
  left: 58px;
  white-space: nowrap;
  background: #010f1c;
  color: #ffffff;
  font-family: var(--tp-ff-body, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.th-floating-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  border-width: 5px 6px 5px 0;
  border-style: solid;
  border-color: transparent #010f1c transparent transparent;
}

.th-floating-item:hover .th-floating-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.th-floating-hotline .th-floating-label {
  background: #00AEEF;
}
.th-floating-hotline .th-floating-label::before {
  border-color: transparent #00AEEF transparent transparent;
}

.th-floating-zalo .th-floating-label {
  background: #0068FF;
}
.th-floating-zalo .th-floating-label::before {
  border-color: transparent #0068FF transparent transparent;
}

.th-floating-messenger .th-floating-label {
  background: #0084FF;
}
.th-floating-messenger .th-floating-label::before {
  border-color: transparent #0084FF transparent transparent;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .th-floating-contact-bar {
    left: 14px;
    bottom: 25px;
    gap: 10px;
  }
  .th-floating-icon {
    width: 44px;
    height: 44px;
  }
  .th-floating-label {
    display: none;
  }
}

/* ============================================
   FLOATING CONTACT BAR -> ĐỔI SANG BÊN PHẢI
   (lật vị trí bar + hướng tooltip/mũi tên)
   ============================================ */
.th-floating-contact-bar {
  left: auto !important;
  right: 20px !important;
}
@media (max-width: 767px) {
  .th-floating-contact-bar {
    left: auto !important;
    right: 14px !important;
  }
}
.th-floating-item:hover {
  transform: scale(1.08) translateX(-4px);
}
.th-floating-label {
  left: auto !important;
  right: 58px !important;
  transform: translateX(10px);
}
.th-floating-item:hover .th-floating-label {
  transform: translateX(0);
}
.th-floating-label::before {
  left: auto !important;
  right: -5px !important;
  border-width: 5px 0 5px 6px !important;
  border-color: transparent transparent transparent #010f1c !important;
}
.th-floating-hotline .th-floating-label::before {
  border-color: transparent transparent transparent #00AEEF !important;
}
.th-floating-zalo .th-floating-label::before {
  border-color: transparent transparent transparent #0068FF !important;
}
.th-floating-messenger .th-floating-label::before {
  border-color: transparent transparent transparent #0084FF !important;
}

/* Nút "lên đầu trang" (mũi tên) -> CÙNG CỘT bên phải với bar liên hệ, nằm DƯỚI
   cùng, cùng kích thước, thẳng hàng & cách đều. Chỉ hiện khi CUỘN (opacity).
   GỐC LỖI "lúc đè lúc không": theme có 2 luật bottom xung đột cho mũi tên —
   .back-to-top-wrapper{bottom:20px}(ẩn) và .back-to-top-wrapper.back-to-top-btn-show
   {bottom:50px}(hiện). Khi cuộn, mũi tên NHẢY giữa 20<->50px; ở 50px thì top của
   nó (50+42=92) vượt lên ĐÈ nút messenger (bar ở 71). Luật CSS thường không ép
   nổi (specificity/transition).
   FIX: ÉP mũi tên bottom = 20px CỐ ĐỊNH cho CẢ 2 trạng thái bằng `html body ...`
   (đủ thắng luật theme 0,2,0) -> mũi tên đứng yên 20px -> bar ở 71px (20+42+khe9)
   luôn khớp, 4 nút cách đều 9px, KHÔNG BAO GIỜ đè. */
html body .back-to-top-wrapper,
html body .back-to-top-wrapper.back-to-top-btn-show {
  left: auto !important;
  right: 20px !important;        /* desktop: thẳng cột contact bar (right:20px) */
  bottom: 20px !important;       /* CỐ ĐỊNH, không nhảy 20<->50 */
}
.th-floating-contact-bar {
  bottom: 78px !important;       /* desktop: mũi tên 20 + icon 44 + khe 14 */
}
@media (max-width: 767px) {
  html body .back-to-top-wrapper,
  html body .back-to-top-wrapper.back-to-top-btn-show {
    right: 10px !important;      /* mobile: thẳng cột contact bar (right:10px) */
  }
  .back-to-top-wrapper,
  .back-to-top-btn {
    width: 42px !important;      /* = kích thước nút xanh (icon 42px) */
    height: 42px !important;
  }
  .back-to-top-btn {
    line-height: 42px !important;
  }
  /* mobile: contact bar luôn ở 71px (block P2 cuối file) = mũi tên 20 + 42 + khe 9. */
}

/* Bo góc nhẹ cho các nút CTA cho đỡ thô (vuông -> bo 8px) */
.tp-header-btn,
.tp-header-5-btn,
.tp-btn,
.tp-btn-red,
.tp-btn-border,
.tp-btn-white,
.megamenu-banner-btn,
.tp-cta-4-button a,
.tp-team-details-contact-btn button,
.tp-contact-2-btn button {
  border-radius: 8px !important;
  overflow: hidden !important;
}
.tp-header-btn::before,
.tp-header-5-btn::before,
.tp-btn::before,
.tp-btn-red::before,
.megamenu-banner-btn::before {
  border-radius: 8px !important;
}

/* 2 banner san pham (Thiet ke bao bi / In an quang cao) -> tran het chieu ngang man hinh */
.tp-product-area .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tp-product-area .tp-product-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* padding 0 (trước 28px): để 2 banner thẳng mép ngoài cùng với hàng thẻ
     DANH MỤC phía trên (cùng .container). Khe giữa 2 banner vẫn giữ (col gutter). */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tp-product-area .tp-product-row > [class*="col-"]:first-child {
  padding-left: 0 !important;
}
.tp-product-area .tp-product-row > [class*="col-"]:last-child {
  padding-right: 0 !important;
}
/* Mobile (<992, 2 banner xếp DỌC): bỏ padding lệch của first/last-child để
   2 banner CÙNG rộng & căn giữa (trước: ô xanh dính trái, ô hồng dính phải). */
@media (max-width: 991px) {
  .tp-product-area .tp-product-row > [class*="col-"]:first-child,
  .tp-product-area .tp-product-row > [class*="col-"]:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.tp-product-area .tp-product-bg-overlay {
  border-radius: 20px !important;
}
/* Khối 2 banner "Xem ngay": bớt khoảng trống 2 đầu (phí chỗ, nhìn thưa).
   Top pt-50 (50px) -> 5px mọi màn. Bottom (col mb-30) -> 5px CHỈ desktop;
   mobile giữ 30px làm khe giữa 2 banner xếp chồng. */
.tp-product-area.pt-50 {
  padding-top: 5px;
}
@media (min-width: 992px) {
  .tp-product-area .tp-product-row > [class*="col-"] {
    margin-bottom: 5px;
  }
}
/* SẢN PHẨM NỔI BẬT (ProductHot, trang chủ): đẩy nội dung lên 20px cho cân với
   khối banner phía trên (pt-60 -> 40px). Chỉ trang chủ — loại trừ
   related-products (trang chi tiết) & trang shop (dùng .tp-shop-area). */
.tp-product-area.th-featured-shop:not(.th-related-products).pt-60 {
  padding-top: 40px !important;
}
/* Mobile/tablet (<992): cụm SẢN PHẨM NỔI BẬT xích lên 20px nữa (40->20); nút
   "Xem tất cả" đồng bộ nút "Tìm hiểu thêm": cao 2/3 (54->36px, giữ chữ) + đẩy
   SANG PHẢI (ghi đè theme ép justify flex-start ở <992). Đặt SAU luật 40px để
   thắng theo thứ tự cascade. */
@media (max-width: 991px) {
  .tp-product-area.th-featured-shop:not(.th-related-products).pt-60 {
    padding-top: 20px !important;
  }
  /* Cắt bớt khoảng trống DƯỚI CÙNG section (pb-60 = 60px -> 20px) cho gọn */
  .tp-product-area.th-featured-shop:not(.th-related-products).pb-60 {
    padding-bottom: 20px !important;
  }
  .th-featured-shop .tp-product-3-coundown-btn {
    justify-content: flex-end !important;
    margin-top: 6px !important;      /* was 20px: sát tiêu đề hơn */
  }
  .th-featured-shop .tp-product-3-coundown-btn .tp-btn {
    padding: 8px 28px !important;
    line-height: 20px !important;
  }
  /* Hàng tiêu đề + nút sát hàng sản phẩm hơn (mb-45 -> 16px) */
  .th-featured-shop .row.mb-45 {
    margin-bottom: 16px !important;
  }
  /* Sản phẩm 2 cột: gutter hẹp (card rộng, đỡ rớt chữ) + card CAO BẰNG NHAU
     (theo card dài hơn): cột stretch + card height 100% -> card ngắn dư ở dưới,
     2 card bằng chiều cao cho đều đẹp. Thu hẹp khoảng cách dọc (mb-30 -> 12px). */
  .th-featured-shop .row.align-items-end {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;        /* khoảng cách dọc = ngang (10px) cho đồng đều */
    align-items: stretch !important;
  }
  .th-featured-shop .product_wrapper.two {
    height: 100%;
  }
  .th-featured-shop .product_wrapper.mb-30 {
    margin-bottom: 0 !important; /* bỏ margin (height:100% nuốt mất), dùng gutter-y */
  }
}

/* ============================================
   PROMO BANNER ĐÔI (trang chủ) — KHUNG ẢNH FULL
   Mỗi banner = 1 tấm ảnh phủ kín khung (ảnh desktop
   + ảnh mobile riêng qua <picture>), chỉ còn nút
   "Xem ngay". Bấm ảnh hoặc nút đều dẫn tới link do
   admin chọn (cả khối là 1 thẻ <a>).
   ============================================ */
.tp-product-area .th-promo-banner {
  position: relative;
  display: block;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a84eb;
}
.tp-product-area .th-promo-banner.th-promo-blue {
  background: linear-gradient(135deg, #00AEEF 0%, #0077B6 100%);
}
.tp-product-area .th-promo-banner.th-promo-magenta {
  background: linear-gradient(135deg, #EC008C 0%, #C50075 100%);
}
.tp-product-area .th-promo-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tp-product-area .th-promo-banner:hover .th-promo-banner__img {
  transform: scale(1.04);
}
/* Nút "Xem ngay" làm GIỐNG nút "Tìm hiểu thêm" (.tp-btn): nền cyan đặc,
   bo 8px, không viền, chữ trắng 700; bỏ hiệu ứng đen trượt (::before) kiểu cũ,
   thay bằng hover nhấc nhẹ + đậm màu + bóng mềm (y như .tp-btn). */
.tp-product-area .th-promo-banner__btn {
  position: absolute;
  right: 24px;                  /* dời nút sang góc PHẢI banner */
  left: auto;
  bottom: 24px;
  z-index: 2;
  display: inline-block;
  /* Chiều cao ~2/3 (54->36px): giảm padding dọc + line-height, GIỮ font-size 14px.
     36 = line-height 20 + padding 8*2. */
  padding: 8px 28px;
  border: none;
  border-radius: 8px;
  background: #FFDD00;          /* vàng logo (rgb 255,221,0) */
  color: #303030;              /* chữ tối cho dễ đọc trên nền vàng */
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  font-family: var(--tp-ff-heading);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.tp-product-area .th-promo-banner__btn span {
  color: #303030;
}
.tp-product-area .th-promo-banner:hover .th-promo-banner__btn,
.tp-product-area .th-promo-banner__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 0 0 200px rgba(0, 0, 0, 0.14);
}
@media (max-width: 767px) {
  .tp-product-area .th-promo-banner {
    height: 200px;
  }
  .tp-product-area .th-promo-banner__btn {
    right: 16px;
    left: auto;
    bottom: 16px;
    padding: 6px 14px;          /* thấp ~2/3 + hẹp ngang (ôm sát chữ), giữ cỡ chữ */
    font-size: 13px;
    line-height: 18px;
  }
}

/* ============================================
   Ô TÌM KIẾM
   - Mobile/tablet (<1200px): thanh full-width dưới logo
   - Desktop (>=1200px): ô inline bên trái nút "Báo giá ngay"
   ============================================ */

/* ----- Mobile/tablet: thanh full-width ----- */
.th-mobile-search {
  display: flex;
  align-items: stretch;
  height: 38px;                 /* ~2/3 so với 56px trước (user thấy hơi cao) */
  margin: 2px -15px 14px;       /* margin âm bù padding 30px của #header-sticky -> sát mép ~15px */
  background: #fff;
  border: 1.5px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.th-mobile-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  /* Chiều cao do wrap (.th-mobile-search) quy định (38px ~2/3). Input co giãn
     đầy chiều cao đó; line-height canh giữa chữ, bỏ padding dọc (giữ ngang 18px).
     Không để line-height 30px kế thừa từ body đẩy cao input. */
  line-height: 34px;
  padding: 0 18px;
  font-size: 14px;
  color: #303030;
}
.th-mobile-search input::placeholder {
  color: #9a9a9a;
}
.th-mobile-search button {
  flex: 0 0 52px;
  border: none;
  background: #1a84eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
}
.th-mobile-search button:hover,
.th-mobile-search button:active {
  background: #0066cc;
}
.th-mobile-search button svg {
  width: 20px;
  height: 20px;
}

/* ----- Ô tìm kiếm INLINE desktop (chỉ màn rộng) -----
   Ẩn mặc định. Chỉ hiện khi màn ≥1700px: lúc đó khoảng trống giữa menu
   ("LIÊN HỆ") và cụm nút bên phải ≥ ~270px, đủ cho ô ~240px mà KHÔNG đè menu.
   Màn desktop hẹp hơn (1200–1699) giữ icon kính lúp (gap chỉ ~80–190px,
   không đủ chỗ cho ô inline). */
.th-desktop-search {
  display: none;
}
@media (min-width: 1700px) {
  .th-desktop-search {
    display: flex;
    align-items: stretch;
    align-self: center;
    width: 300px;
    height: 44px;
    margin-right: 20px;
    background: #fff;
    border: 1.5px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .th-desktop-search:focus-within {
    border-color: #1a84eb;
    box-shadow: 0 0 0 3px rgba(26, 132, 235, 0.12);
  }
  .th-desktop-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    color: #303030;
  }
  .th-desktop-search input::placeholder {
    color: #9a9a9a;
  }
  .th-desktop-search button {
    flex: 0 0 46px;
    border: none;
    background: #1a84eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
  }
  .th-desktop-search button:hover {
    background: #0066cc;
  }
  .th-desktop-search button svg {
    width: 18px;
    height: 18px;
  }
  /* Đã có ô inline -> bỏ icon kính lúp cho khỏi trùng chức năng */
  .tp-header-3-search {
    display: none !important;
  }
  /* Ô inline chiếm chỗ -> giữ "Báo giá ngay" trên 1 dòng cho gọn đẹp */
  .tp-header-5-btn,
  .tp-header-5-btn span {
    white-space: nowrap;
  }
}
/* Màn rất rộng (>=1920px): nới ô ra 400px để chứa ĐỦ câu placeholder dài
   "Quý khách cần thiết kế, in ấn, ấn phẩm nào ?" (text ~304px). Lúc này khoảng
   trống menu<->cụm phải ~514px nên 400px vẫn KHÔNG đè menu. */
@media (min-width: 1920px) {
  .th-desktop-search {
    width: 400px;
  }
}

/* Header mobile: nền trắng đặc.
   KHÔNG đẩy nội dung bằng margin cứng: chiều cao header (.tp-header-height)
   được JS set tự động đã GỒM ô tìm kiếm, nên hero/breadcrumb tự nằm ngay
   dưới header (gap tự nhiên ~15px) trên thiết bị thật. */
@media (max-width: 1199px) {
  .tp-header-height,
  #header-sticky,
  .tp-header-5-bottom.tp-header-5-transparent {
    background: #fff !important;
  }
  /* Spacer header cao auto theo chiều cao THẬT (đã gồm ô tìm kiếm).
     JS theme đôi khi set hụt (vd 168px thay vì 218px) do đo trước khi
     ô tìm kiếm dàn xong -> nội dung bị header che. 'auto' luôn khớp
     chiều cao thật nên hero + breadcrumb mọi trang tự nằm đúng dưới
     header, không bị che. Mobile không bật sticky nên auto an toàn. */
  .tp-header-height {
    height: auto !important;
  }
}

/* ============================================
   WIDESCREEN CONTAINER EXTENSION (OPTION 1)
   Mở rộng chiều ngang container trên màn hình lớn
   ============================================ */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1520px !important;
  }
}

@media (min-width: 1600px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1700px !important;
  }
}

@media (min-width: 1920px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1820px !important;
  }
}

/* ============================================
   CTA BUTTON POLISH (02/10/2026)
   - Bo "vet den" (::before #000 phu khi hover)
   - Hover: dam mau (brightness) + nhac nhe + bong mem (phuong an A)
   - Padding gon lai cho can voi chu
   ============================================ */
.tp-btn::before,
.tp-btn-secondary::before,
.tp-btn-red::before,
.th-blog-viewall::before {
  display: none !important;
}
.tp-btn,
.tp-btn-secondary,
.tp-btn-red,
.th-blog-viewall,
.megamenu-banner-btn {
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease, background-color .25s ease !important;
}
/* Nut nen dac: dam mau (lop inset, chu van trang) + nhac + bong mem */
.tp-btn:hover,
.tp-btn-secondary:hover,
.tp-btn-red:hover,
.th-blog-viewall:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 0 0 200px rgba(0, 0, 0, 0.14) !important;
}
.tp-btn:active,
.tp-btn-secondary:active,
.tp-btn-red:active,
.th-blog-viewall:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22), inset 0 0 0 200px rgba(0, 0, 0, 0.2) !important;
}
/* Megamenu btn da co hover mau dep san -> chi them nhac nhe */
.megamenu-banner-btn:hover {
  transform: translateY(-2px);
}
.megamenu-banner-btn:active {
  transform: translateY(0);
}
/* Padding gon, can doi voi chu */
.tp-btn,
.tp-btn-secondary,
.tp-btn-red {
  padding: 12px 28px !important;
}
/* Mui ten/icon trong nut truot nhe khi hover */
.tp-btn .lic,
.tp-btn-secondary .lic,
.tp-btn-red .lic,
.megamenu-banner-btn .lic {
  transition: transform .25s ease;
}
.tp-btn:hover .lic,
.tp-btn-secondary:hover .lic,
.tp-btn-red:hover .lic,
.megamenu-banner-btn:hover .lic {
  transform: translateX(3px);
}

/* Nut CTA o HEADER (tp-header-btn / 2-btn / 5-btn) - dong bo hieu ung A */
.tp-header-btn::before,
.tp-header-2-btn::before,
.tp-header-5-btn::before {
  display: none !important;
}
.tp-header-btn,
.tp-header-2-btn,
.tp-header-5-btn {
  transition: transform .2s ease, box-shadow .25s ease !important;
  padding: 12px 28px !important;
}
.tp-header-btn:hover,
.tp-header-2-btn:hover,
.tp-header-5-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 0 0 200px rgba(0, 0, 0, 0.14) !important;
}
.tp-header-btn:active,
.tp-header-2-btn:active,
.tp-header-5-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22), inset 0 0 0 200px rgba(0, 0, 0, 0.2) !important;
}
.tp-header-btn .lic,
.tp-header-5-btn .lic {
  transition: transform .25s ease;
}
.tp-header-btn:hover .lic,
.tp-header-5-btn:hover .lic {
  transform: translateX(3px);
}

/* ============================================================
   DESKTOP SPACING POLISH (02/10/2026) — cat bot padding du nhieu
   ============================================================ */
/* Footer: bot nen xanh du o tren/duoi */
.tp-footer-3-area .tp-footer-top {
  padding-top: 60px !important;
  padding-bottom: 14px !important;
}
.tp-footer-3-area .tp-footer-top .row > [class*="col-"] {
  margin-bottom: 22px !important;
}
/* Typography noi dung bai viet: gon lai, khoang cach deu, de doc */
/* ============================================================
   MAU CHU DONG BO TOAN SITE (02/10/2026)
   Tieu de #000 (da co san --tp-heading-primary) · Noi dung #303030
   ============================================================ */
:root {
  --tp-text-body: #303030;
  --tp-text-p: #303030;
}
/* Bao ve chu tren NEN TOI (footer) -> giu sang, khong bi den tren den */
.tp-footer-3-area,
.tp-footer-3-area p,
.tp-footer-3-area .tp-footer-widget,
.tp-footer-3-area .tp-footer-text p { color: rgba(255,255,255,0.75) !important; }
.tp-footer-3-area .tp-footer-list a,
.tp-footer-3-area .tp-footer-widget a,
.tp-footer-3-area .tp-footer-call { color: rgba(255,255,255,0.72) !important; }
.tp-footer-3-area .tp-footer-list a:hover,
.tp-footer-3-area .tp-footer-widget a:hover { color: #ffffff !important; }
.tp-footer-3-area .tp-footer-title { color: #ffffff !important; }

/* Mau chu thong nhat: tieu de #000, noi dung #303030.
   KHONG ep mau tren span -> span to mau rieng (inline) cua nguoi viet van giu nguyen. */
.th-article-content,
.tp-postbox-paragraph,
.tp-postbox-content { color: #303030 !important; }
.th-article-content p, .th-article-content li, .th-article-content td,
.tp-postbox-paragraph p, .tp-postbox-paragraph li, .tp-postbox-paragraph td,
.tp-postbox-content p, .tp-postbox-content li, .tp-postbox-content td { color: #303030 !important; }
.th-article-content h1, .th-article-content h2, .th-article-content h3, .th-article-content h4, .th-article-content h5, .th-article-content h6,
.tp-postbox-paragraph h1, .tp-postbox-paragraph h2, .tp-postbox-paragraph h3, .tp-postbox-paragraph h4, .tp-postbox-paragraph h5, .tp-postbox-paragraph h6,
.tp-postbox-content h1, .tp-postbox-content h2, .tp-postbox-content h3, .tp-postbox-content h4 { color: #000000 !important; }
.th-article-content a, .tp-postbox-paragraph a, .tp-postbox-content a { color: #0088CC !important; }

.th-article-content p,
.tp-postbox-paragraph p,
.tp-postbox-content p {
  line-height: 1.4 !important;
  margin-bottom: 7px !important;
  margin-top: 0 !important;
}
.th-article-content li,
.tp-postbox-paragraph li {
  line-height: 1.4 !important;
  margin-bottom: 5px;
}
/* 3 muc khoang cach nguoi viet tu chon trong editor (Khit/Vua/Thoang) */
.th-article-content p.sp-tight,
.tp-postbox-paragraph p.sp-tight { line-height: 1.25 !important; margin-bottom: 3px !important; }
.th-article-content p.sp-normal,
.tp-postbox-paragraph p.sp-normal { line-height: 1.4 !important; margin-bottom: 7px !important; }
.th-article-content p.sp-loose,
.tp-postbox-paragraph p.sp-loose { line-height: 1.8 !important; margin-bottom: 16px !important; }
.th-article-content ul,
.th-article-content ol,
.tp-postbox-paragraph ul,
.tp-postbox-paragraph ol {
  margin-bottom: 16px !important;
  padding-left: 22px;
}
.th-article-content h2,
.th-article-content h3,
.th-article-content h4,
.tp-postbox-paragraph h2,
.tp-postbox-paragraph h3,
.tp-postbox-paragraph h4 {
  margin-top: 24px !important;        /* heading cach doan truoc */
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}
/* An doan/khoang rong thua lam gian cach lung tung */
.th-article-content p:empty,
.tp-postbox-paragraph p:empty,
.th-article-content p > br:only-child,
.tp-postbox-paragraph p > br:only-child {
  display: none !important;
}

/* Dong bo spacing + mau cho MO TA SAN PHAM + TRANG TINH (giong bai viet) */
.product__details-content, .tp-page-content-wrapper { color: #303030 !important; line-height: 1.4 !important; }
.product__details-content p, .product__details-paragraph p, .tp-page-content-wrapper p {
  line-height: 1.4 !important; margin-bottom: 7px !important; margin-top: 0 !important; color: #303030 !important;
}
.product__details-content li, .tp-page-content-wrapper li { line-height: 1.4 !important; margin-bottom: 5px; color: #303030 !important; }
.product__details-content ul, .product__details-content ol, .tp-page-content-wrapper ul, .tp-page-content-wrapper ol { margin-bottom: 14px !important; padding-left: 22px; }
.product__details-content h1, .product__details-content h2, .product__details-content h3, .product__details-content h4,
.tp-page-content-wrapper h1, .tp-page-content-wrapper h2, .tp-page-content-wrapper h3, .tp-page-content-wrapper h4 {
  margin-top: 24px !important; margin-bottom: 12px !important; line-height: 1.3 !important; color: #000000 !important;
}

/* Can deu 2 ben (justify) cho noi dung bai viet / dich vu / mo ta SP / trang tinh */
.th-article-content p, .tp-postbox-paragraph p, .tp-postbox-content p,
.product__details-content p, .tp-page-content-wrapper p,
.product__details-description-paragraph, .product__details-description-paragraph p,
.th-about-content p, .th-vision-content p, .th-mission-content p {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Thu gon spacing the san pham (line-height 30px -> 1.4, bot khoang trong) */
.product__content { padding: 12px 18px 16px !important; }
.product__content .product__category-tag,
.product__content .product__rating-stars,
.product__content .product__price-label {
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}
.product__content .product__title { line-height: 1.3 !important; margin-bottom: 5px !important; }

/* Thumbnail bai viet: khung ti le 3:2 dong nhat + cover (het "be", khong meo) + hover zoom */
.tp-blog-thumb {
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  overflow: hidden;
}
.tp-blog-thumb > a,
.tp-blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}
.tp-blog-thumb img {
  transition: transform .5s ease;
}
.tp-blog-wrapper:hover .tp-blog-thumb img,
.tp-blog-thumb:hover img {
  transform: scale(1.06);
}
/* Desktop (>=992px): cat padding doc qua lon o cac section cho gon, chuyen nghiep */
@media (min-width: 992px) {
  .pt-110, .pt-115, .pt-120, .pt-125, .pt-130, .pt-135, .pt-140, .pt-145,
  .pt-150, .pt-155, .pt-160, .pt-165, .pt-170, .pt-175, .pt-180, .pt-185, .pt-190, .pt-195 {
    padding-top: 75px !important;
  }
  .pb-110, .pb-115, .pb-120, .pb-125, .pb-130, .pb-135, .pb-140, .pb-145,
  .pb-150, .pb-155, .pb-160, .pb-165, .pb-170, .pb-175, .pb-180, .pb-185, .pb-190, .pb-195 {
    padding-bottom: 70px !important;
  }
  /* CTA (tp-cta-4) dang 135/95 -> gon lai */
  .tp-cta-4-area.two {
    padding-top: 72px !important;
    padding-bottom: 62px !important;
  }
}

/* ============================================================
   MOBILE POLISH (02/10/2026) — toi uu giao dien dien thoai
   P1 banner trang con · P2 nut noi · P3 padding section · P5 header
   ============================================================ */
@media (max-width: 767px) {

  /* ---- P1: Banner tieu de trang con (breadcrumb) gon lai ----
     Truoc: padding 280/150px, cao ~650px, title 56px -> lang phi ca man hinh */
  .tp-breadcrumb-area {
    /* padding-top phai >= chieu cao header mobile (~168px, logo + o tim kiem) vi
       header DE len banner (header transparent + smooth-scroll). Truoc de 152px
       < 168px -> dinh TIEU DE trang con bi header che ~16px (lo ro o trang chi
       tiet / breadcrumb dai). 182px = 168 + ~14px ho, tieu de luon hien du. */
    padding: 182px 0 20px !important;
  }
  .tp-breadcrumb-title {
    font-size: 28px !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
  }
  .tp-breadcrumb-body,
  .tp-breadcrumb-body a,
  .tp-breadcrumb-body span {
    font-size: 13px !important;
  }

  /* DANH MUC SAN PHAM: bot khoang trong 2 dau tren mobile.
     Section dung pt-60/pb-60 (60px) - khong nam trong list P3 (bat dau tu 80)
     nen van du 60px 2 dau -> ep ve 24px cho gon (user: "du nhieu lam gi"). */
  .tp-product-2-area {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* ---- P3: Giam padding doc section lon tren mobile ----
     Cac section dung utility pt-/pb- 80..195 -> ep ve 46px cho gon */
  .pt-80, .pt-85, .pt-90, .pt-95, .pt-100, .pt-105, .pt-110, .pt-115,
  .pt-120, .pt-125, .pt-130, .pt-135, .pt-140, .pt-145, .pt-150, .pt-155,
  .pt-160, .pt-165, .pt-170, .pt-175, .pt-180, .pt-185, .pt-190, .pt-195 {
    padding-top: 46px !important;
  }
  .pb-80, .pb-85, .pb-90, .pb-95, .pb-100, .pb-105, .pb-110, .pb-115,
  .pb-120, .pb-125, .pb-130, .pb-135, .pb-140, .pb-145, .pb-150, .pb-155,
  .pb-160, .pb-165, .pb-170, .pb-175, .pb-180, .pb-185, .pb-190, .pb-195 {
    padding-bottom: 46px !important;
  }
  /* CTA tp-cta-4 (pt-135/pb-95) + cac -area padding lon */
  .tp-cta-4-area.two {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ---- P2: Bo nut noi (Goi/Zalo/Messenger) gon hon, sat goc hon ----
     De bot che noi dung ben phai. bottom:71px = luon chua san cho mui ten
     (len-dau-trang) ben duoi -> KHONG BAO GIO DE, khong phu thuoc selector
     anh-em (smooth-scroll co the lam hong). Mui ten o bottom 20, cao 42,
     bar o 71 -> khe 9px bang gap giua cac nut. */
  .th-floating-contact-bar {
    gap: 9px !important;
    bottom: 71px !important;
    right: 10px !important;
  }
  .th-floating-icon {
    width: 42px !important;
    height: 42px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  }

  /* ---- P5: Nut "Theo doi don hang" gon lai, khong tran ----
     Dang ribbon o mep tren */
  .th-track-order-tab {
    right: 14px !important;
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  /* ---- P4: Chong nhay layout (CLS) ---- anh the SP vuong 1:1 giu san cho */
  .tp-product-2-thumb img,
  .product__thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

/* ============================================================
   Menu mobile (off-canvas) — tinh chinh 06/10/2026
   ============================================================ */

/* 1) Overlay: lam MO + toi nhe nen phia sau (frosted glass) khi mo menu.
      Van thay noi dung ben duoi (blur), panel menu giu nen trang nen chu luon ro. */
.body-overlay.apply,
.body-overlay.opened {
  opacity: 1 !important;
  visibility: visible !important;
  background-color: rgba(10, 15, 25, 0.38) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* 2) Doan gioi thieu gan dau menu — can deu 2 ben cho dep */
.tpoffcanvas__title p {
  text-align: justify !important;
}

/* 3) Tu "Lien he" tro xuong — xich sat lai, bot thua */
.tpoffcanvas .tp-main-menu-mobile {
  margin-bottom: 24px !important;
}
.tpoffcanvas__contact-info {
  margin-bottom: 20px !important;
}
.tpoffcanvas__contact-title h5 {
  margin-bottom: 10px !important;
}
.tpoffcanvas__contact-info ul li {
  margin-bottom: 6px !important;
}
.tpoffcanvas__input {
  margin-bottom: 20px !important;
}
.tpoffcanvas__input-title h4 {
  margin-bottom: 10px !important;
}
.tpoffcanvas__social {
  margin-top: 0 !important;
}

/* 4) Thu hep panel menu de lo dai nen MO ben trai (nhin thay blur ben duoi) */
.tpoffcanvas {
  width: 82% !important;
  max-width: 330px !important;
}
}

/* Ẩn khỏi mắt nhưng vẫn đọc được bởi screen-reader & SEO (vd h1 ẩn) */
.th-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   Anh/video/bang trong NOI DUNG soan thao khong tran khung (mobile)
   Fix: anh chen trong bai viet/dich vu/san pham/trang bi rong hon
   man hinh -> cat mat ben phai. Buoc anh co lai, giu ti le.
   ============================================================ */
.th-article-content img,
.tp-postbox-paragraph img,
.product__details-description-paragraph img,
.tp-page-content-wrapper img,
.th-about-content img,
.th-vision-content img,
.th-mission-content img,
.th-article-content video,
.tp-postbox-paragraph video,
.product__details-description-paragraph video,
.tp-page-content-wrapper video {
  max-width: 100% !important;
  height: auto !important;
}
.th-article-content iframe,
.tp-postbox-paragraph iframe,
.product__details-description-paragraph iframe,
.tp-page-content-wrapper iframe {
  max-width: 100% !important;
}
.th-article-content,
.tp-postbox-paragraph,
.product__details-description-paragraph,
.tp-page-content-wrapper,
.th-about-content,
.th-vision-content,
.th-mission-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.th-article-content table,
.tp-postbox-paragraph table,
.product__details-description-paragraph table,
.tp-page-content-wrapper table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}