/* ==========================================================================
   HEADER STYLE FOR MUCINSAIGON.COM (CHUẨN UX/UI TECH E-COMMERCE CHUYÊN NGHIỆP)
   - Tông màu chủ đạo: #253989 (Xanh Navy đậm sang trọng)
   - Tông màu thương hiệu: #ed1c24 (Đỏ tươi rực rỡ như logo)
   - Desktop:
     + Khung logo nền trắng sắc nét, chữ ĐỎ TƯƠI #ed1c24
     + Menu ngang viết liền trên 1 dòng duy nhất, không rớt dòng (white-space: nowrap)
     + Nút "DANH MỤC SẢN PHẨM" hover mở Mega Menu 2 cột chuyên nghiệp như Thành Đạt & sàn công nghệ
     + Cột trái 250px: 100% danh mục có icon đồng bộ, canh lề thẳng tắp, không lệch, không scroll ngang
     + Panel phải 820px: Chiều cao đồng bộ 540px, bố cục 3 cột thẳng đứng, không tràn chữ ra ngoài banner
     + Chân Mega Menu: Thanh cam kết uy tín (Hàng chính hãng • Hỗ trợ kỹ thuật • Giao hàng toàn quốc)
     + Triệt tiêu hoàn toàn drawer mobile-menu trên desktop
   - Mobile:
     + Nút Hamburger 3 gạch mở Drawer trượt mượt mà
     + Khung logo nền trắng bo góc, chữ ĐỎ TƯƠI #ed1c24
     + Hotline tròn + Giỏ hàng có badge count chuẩn xác
     + Thanh tìm kiếm FiboSearch hàng 2 full-width
     + Thanh điều hướng nhanh vuốt ngang (Swipeable tabs) dạng pill
     + Ẩn hoàn toàn dropdown 26 mục của "DANH MỤC SẢN PHẨM" trên thanh ngang
   ========================================================================== */

:root {
  --hdr-blue: #253989;         /* Màu nền chủ đạo theo yêu cầu: #253989 */
  --hdr-blue-dark: #1b2b6b;    /* Xanh sẫm hơn cho hover */
  --hdr-blue-light: #eef2fc;   /* Xanh nhạt cho active menu & hover item */
  --hdr-brand-red: #ed1c24;    /* ĐỎ TƯƠI RỰC RỠ NHƯ LOGO */
  --hdr-border-trans: rgba(255, 255, 255, 0.35);
  --td-text: #222222;
  --td-text-muted: #64748b;
  --td-border: #e2e8f0;
}

/* Triệt tiêu style cũ của theme */
.site-header .main-header,
.site-header .first-row.main-header,
.site-header-modern .main-header-row {
  background: var(--hdr-blue) !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
}

.site-header-modern {
  width: 100%;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.site-header-modern a {
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ==========================================================================
   1. MAIN HEADER ROW (NỀN #253989)
   ========================================================================== */
.site-header-modern .main-header-row .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  max-width: 1500px !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Nút Hamburger 3 gạch mở Menu trên Mobile (Ẩn hoàn toàn trên Desktop) */
.site-header-modern .mobile-hamburger-btn {
  display: none;
}

/* Khối Logo: Nền trắng bo góc giúp chữ ĐỎ TƯƠI nổi bật 100% */
.site-header-modern .td-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.site-header-modern .td-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 5px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header-modern .td-logo-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.site-header-modern .td-logo-img {
  height: 44px !important;
  width: auto !important;
  max-height: 46px !important;
  object-fit: contain;
  display: block;
}

.site-header-modern .td-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* CHỮ "MỰC IN SÀI GÒN" MÀU ĐỎ TƯƠI CHUẨN LOGO */
.site-header-modern .td-logo-title,
.site-header-modern .td-logo-title strong {
  color: var(--hdr-brand-red) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

.site-header-modern .td-logo-slogan {
  color: #4b5563 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* Thanh tìm kiếm trung tâm Desktop */
.site-header-modern .td-search-wrap {
  flex: 1;
  max-width: 480px;
  margin: 0 10px;
}

.site-header-modern .dgwt-wcas-search-wrapp {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

.site-header-modern .dgwt-wcas-sf-wrapp {
  border-radius: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.site-header-modern .dgwt-wcas-search-input {
  font-size: 13.5px !important;
  padding: 8px 18px !important;
  height: 40px !important;
  color: var(--td-text) !important;
  background: #ffffff !important;
  border: none !important;
}

.site-header-modern .dgwt-wcas-search-input::placeholder {
  color: #888888 !important;
  font-style: italic;
}

.site-header-modern .dgwt-wcas-search-submit {
  background: var(--hdr-blue) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease;
}

.site-header-modern .dgwt-wcas-search-submit:hover {
  background: var(--hdr-blue-dark) !important;
}

.site-header-modern .dgwt-wcas-search-submit svg {
  fill: #ffffff !important;
  width: 17px !important;
  height: 17px !important;
}

/* ==========================================================================
   CỤM TIỆN ÍCH: HOTLINE, GIỎ HÀNG, TÀI KHOẢN (HERO CART + REFINED GLASSMORPHISM)
   ========================================================================== */
.site-header-modern .td-actions-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Kiểu dáng chung: Chuẩn Pill 40px cho cả 3 nút */
.site-header-modern .td-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 1. NÚT HOTLINE: Kính mờ sang trọng, số vàng ấm áp dịu mắt */
.site-header-modern .td-hotline-btn,
.site-header-modern .td-hotline-box {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 14px 0 6px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.site-header-modern .td-hotline-btn:hover,
.site-header-modern .td-hotline-box:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-1px);
}

.site-header-modern .td-hotline-btn .td-action-icon,
.site-header-modern .td-hotline-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--hdr-brand-red, #ed1c24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.25s ease !important;
}

.site-header-modern .td-hotline-btn:hover .td-action-icon {
  transform: scale(1.08) !important;
}

.site-header-modern .td-hotline-num {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffe082 !important; /* Vàng gold ấm áp, sang trọng, nổi bật */
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.site-header-modern .td-hotline-sub {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.site-header-modern .td-hotline-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-header-modern .td-hotline-chevron {
  font-size: 8.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: transform 0.25s ease !important;
}

.site-header-modern .td-hotline-wrapper:hover .td-hotline-chevron,
.site-header-modern .td-hotline-wrapper.is-active .td-hotline-chevron {
  transform: rotate(180deg) !important;
}

.site-header-modern .td-hotline-mobile-text {
  display: none !important;
}

@keyframes td-phone-ring {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-14deg); }
  20%, 40% { transform: rotate(14deg); }
  50% { transform: rotate(0deg); }
}

/* 1.1 DROPDOWN NỔI TRÊN DESKTOP */
.site-header-modern .td-hotline-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: 370px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(37, 57, 137, 0.12) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.site-header-modern .td-hotline-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 28px;
  width: 12px;
  height: 12px;
  background: var(--hdr-brand-navy, #253989);
  transform: rotate(45deg);
  z-index: 1;
}

.site-header-modern .td-hotline-wrapper:hover .td-hotline-dropdown,
.site-header-modern .td-hotline-dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.site-header-modern .hdrop-header {
  background: var(--hdr-brand-navy, #253989) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
}

.site-header-modern .hdrop-header-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #ffffff !important;
}

.site-header-modern .hdrop-badge-status {
  font-size: 10px !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.site-header-modern .hdrop-badge-status i {
  font-size: 6px !important;
}

.site-header-modern .hdrop-body {
  padding: 6px 0 !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
}

.site-header-modern .hdrop-group {
  padding: 8px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.site-header-modern .hdrop-group:last-child {
  border-bottom: none !important;
}

.site-header-modern .hdrop-group-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.site-header-modern .hdrop-group-title.text-red { color: var(--hdr-brand-red, #ed1c24) !important; }
.site-header-modern .hdrop-group-title.text-blue { color: var(--hdr-brand-navy, #253989) !important; }
.site-header-modern .hdrop-group-title.text-feedback { color: #0284c7 !important; }

.site-header-modern .hdrop-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
  margin-bottom: 3px !important;
}

.site-header-modern .hdrop-item:hover {
  background: #f8fafc !important;
}

.site-header-modern .hdrop-item-info {
  display: flex !important;
  flex-direction: column !important;
}

.site-header-modern .hdrop-num {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.4px !important;
  line-height: 1.2 !important;
}

.site-header-modern .hdrop-tag {
  font-size: 10px !important;
  color: #64748b !important;
  margin-top: 1px !important;
}

.site-header-modern .hdrop-tag.tag-primary {
  color: #b91c1c !important;
  font-weight: 600 !important;
}

.site-header-modern .hdrop-tag.tag-gold {
  color: #b45309 !important;
  font-weight: 600 !important;
}

.site-header-modern .hdrop-tag.tag-feedback {
  color: #0369a1 !important;
  font-weight: 600 !important;
}

.site-header-modern .hdrop-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.site-header-modern .hdrop-btn-copy {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}

.site-header-modern .hdrop-btn-copy:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.site-header-modern .hdrop-btn-call {
  background: var(--hdr-brand-red, #ed1c24) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 5px rgba(237, 28, 36, 0.25) !important;
  transition: all 0.2s ease !important;
}

.site-header-modern .hdrop-btn-call:hover {
  background: #c41219 !important;
  box-shadow: 0 4px 10px rgba(237, 28, 36, 0.4) !important;
  transform: translateY(-1px) !important;
}

.site-header-modern .hdrop-btn-call.btn-call-si {
  background: #0284c7 !important;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25) !important;
}

.site-header-modern .hdrop-btn-call.btn-call-si:hover {
  background: #0369a1 !important;
}

.site-header-modern .hdrop-btn-call.btn-call-feedback {
  background: #475569 !important;
  box-shadow: 0 2px 5px rgba(71, 85, 105, 0.25) !important;
}

.site-header-modern .hdrop-btn-call.btn-call-feedback:hover {
  background: #334155 !important;
}

.site-header-modern .hdrop-btn-zalo {
  background: #0068ff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.site-header-modern .hdrop-btn-zalo:hover {
  background: #0056d6 !important;
}

.site-header-modern .hdrop-footer {
  background: #f8fafc !important;
  padding: 9px 14px !important;
  font-size: 11px !important;
  color: #64748b !important;
  text-align: center !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* 1.2 MOBILE BOTTOM SHEET MODAL */
.td-hotline-mobile-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

.td-hotline-mobile-backdrop.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.td-hotline-bottom-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 85vh !important;
  background: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
  z-index: 999999 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 10px 16px 20px !important;
}

.td-hotline-bottom-sheet.is-open {
  transform: translateY(0) !important;
}

.sheet-drag-handle {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding: 4px 0 8px !important;
}

.sheet-drag-handle span {
  width: 38px !important;
  height: 5px !important;
  background: #cbd5e1 !important;
  border-radius: 3px !important;
}

.sheet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 14px !important;
}

.sheet-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sheet-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(237, 28, 36, 0.1) !important;
  color: var(--hdr-brand-red, #ed1c24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.sheet-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.sheet-subtitle {
  font-size: 11px !important;
  color: #64748b !important;
  display: block !important;
}

.sheet-close-btn {
  background: #f1f5f9 !important;
  border: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #64748b !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sheet-section {
  margin-bottom: 16px !important;
}

.sheet-section-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sheet-cards-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sheet-call-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease !important;
}

.sheet-call-card:active {
  transform: scale(0.98) !important;
  background: #f1f5f9 !important;
}

.sheet-call-card.primary-card {
  background: #fff5f5 !important;
  border-color: #fecaca !important;
}

.card-left {
  display: flex !important;
  flex-direction: column !important;
}

.card-role {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.card-phone {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.5px !important;
}

.primary-card .card-phone {
  color: var(--hdr-brand-red, #ed1c24) !important;
}

.card-btn-call {
  background: var(--hdr-brand-red, #ed1c24) !important;
  color: #ffffff !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 8px rgba(237, 28, 36, 0.35) !important;
}

.card-btn-call.btn-si {
  background: #0284c7 !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35) !important;
}

.card-btn-call.btn-feedback {
  background: #475569 !important;
  box-shadow: 0 3px 8px rgba(71, 85, 105, 0.35) !important;
}

.site-header-modern .card-actions-row,
.card-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.site-header-modern .sheet-zalo-pill,
.sheet-zalo-pill {
  background: #0068ff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 7px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 3px 8px rgba(0, 104, 255, 0.25) !important;
  transition: all 0.2s ease !important;
}

.site-header-modern .sheet-zalo-pill:hover,
.site-header-modern .sheet-zalo-pill:active,
.sheet-zalo-pill:hover,
.sheet-zalo-pill:active {
  background: #0056d6 !important;
}

.sheet-si-wrapper {
  display: flex !important;
  gap: 8px !important;
}

.sheet-si-wrapper .sheet-call-card {
  flex: 1 !important;
}

.sheet-zalo-btn {
  background: #0068ff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.sheet-cancel-btn {
  width: 100% !important;
  padding: 12px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  margin-top: 6px !important;
}

/* 1.3 TOAST FEEDBACK */
.hdrop-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100px) !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  z-index: 1000000 !important;
  opacity: 0 !important;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  pointer-events: none !important;
}

.hdrop-toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
}

/* Ẩn hiện giữa Desktop và Mobile */
@media (min-width: 769px) {
  .td-hotline-mobile-backdrop,
  .td-hotline-bottom-sheet {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .site-header-modern .td-hotline-dropdown {
    display: none !important;
  }
}

/* 2. NÚT GIỎ HÀNG (HERO CTA BUTTON): NỀN ĐỎ THƯƠNG HIỆU SIÊU NỔI BẬT */
.site-header-modern .td-cart-box,
.site-header-modern .td-cart-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Bắt TẤT CẢ các selector dù WooCommerce có trả về HTML nào */
.site-header-modern .td-cart-box > a,
.site-header-modern .td-cart-wrap > a,
.site-header-modern a.cart-contents,
.site-header-modern .td-cart-btn,
.site-header-modern .td-cart-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 15px 0 5px !important;
  background: linear-gradient(135deg, #ed1c24 0%, #c41219 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(237, 28, 36, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
  user-select: none;
}

.site-header-modern .td-cart-box > a:hover,
.site-header-modern .td-cart-wrap > a:hover,
.site-header-modern a.cart-contents:hover,
.site-header-modern .td-cart-btn:hover {
  background: linear-gradient(135deg, #ff2a33 0%, #ed1c24 100%) !important;
  box-shadow: 0 6px 18px rgba(237, 28, 36, 0.65) !important;
  transform: translateY(-1px) !important;
}

.site-header-modern a.cart-contents:active,
.site-header-modern .td-cart-btn:active {
  transform: translateY(0) !important;
}

/* Vòng tròn icon giỏ hàng: hỗ trợ cả .td-action-icon lẫn <i> trực tiếp */
.site-header-modern a.cart-contents .td-action-icon,
.site-header-modern .td-cart-box a > i.fa-shopping-cart,
.site-header-modern a.cart-contents > i.fa-shopping-cart,
.site-header-modern .td-cart-icon-wrap {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  position: relative !important;
  box-shadow: none !important;
  transition: transform 0.25s ease !important;
}

.site-header-modern a.cart-contents:hover .td-action-icon,
.site-header-modern a.cart-contents:hover > i.fa-shopping-cart {
  transform: scale(1.1) !important;
}

/* Huy hiệu số lượng (Badge): Vàng Chanh #ffeb3b rực rỡ, chữ đỏ #c41219 đậm */
.site-header-modern a.cart-contents .cart-count,
.site-header-modern .td-cart-box .cart-count,
.site-header-modern .td-cart-wrap .cart-count {
  position: absolute !important;
  top: -4px !important;
  right: -5px !important;
  background: #ffeb3b !important;
  color: #c41219 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* Chữ hiển thị trong Giỏ hàng: Luôn trắng tinh khôi */
.site-header-modern a.cart-contents,
.site-header-modern a.cart-contents .td-action-title,
.site-header-modern a.cart-contents .td-cart-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.site-header-modern a.cart-contents .td-action-sub,
.site-header-modern a.cart-contents .td-cart-sub-text {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
}

/* ==========================================================================
   MINI-CART DROPDOWN WIDGET (XỬ LÝ DỨT ĐIỂM LỖI CHE KHUẤT NÚT GIỎ HÀNG)
   ========================================================================== */
.site-header-modern .td-cart-box,
.site-header-modern .td-cart-wrap {
  position: relative !important;
}

/* ẨN TUYỆT ĐỐI MẶC ĐỊNH - KHÔNG ĐƯỢC PHÉP TỰ ĐỘNG HIỂN THỊ ĐÈ LÊN HEADER */
.site-header-modern .widget_shopping_cart,
.site-header-modern .td-cart-box .widget_shopping_cart,
.site-header-modern .td-cart-wrap .widget_shopping_cart,
.site-header-modern #cart-icon .widget_shopping_cart {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 350px !important;
  max-width: 90vw !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 14px 16px !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  text-align: left !important;
}

/* Tam giác trỏ lên nút Giỏ Hàng */
.site-header-modern .widget_shopping_cart::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  right: 25px !important;
  width: 14px !important;
  height: 14px !important;
  background: #ffffff !important;
  border-top: 1px solid #e8e8e8 !important;
  border-left: 1px solid #e8e8e8 !important;
  transform: rotate(45deg) !important;
  z-index: 1 !important;
}

/* Vùng đệm an toàn để rê chuột mượt mà */
.site-header-modern .widget_shopping_cart::after {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  width: 100% !important;
  height: 12px !important;
}

/* CHỈ HIỂN THỊ KHI RÊ CHUỘT TRÊN DESKTOP */
@media (min-width: 769px) {
  .site-header-modern .td-cart-box:hover .widget_shopping_cart,
  .site-header-modern .td-cart-wrap:hover .widget_shopping_cart,
  .site-header-modern #cart-icon:hover .widget_shopping_cart {
    display: block !important;
    animation: tdCartFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* TRÊN MOBILE (<= 768px): ẨN HOÀN TOÀN DROPDOWN NÀY (Bấm vào chuyển thẳng tới /gio-hang.html) */
@media (max-width: 768px) {
  .site-header-modern .widget_shopping_cart,
  .site-header-modern .td-cart-box .widget_shopping_cart,
  .site-header-modern .td-cart-wrap .widget_shopping_cart,
  .site-header-modern #cart-icon .widget_shopping_cart {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Styling danh sách sản phẩm trong Mini Cart */
/* ===== MINI CART HOVER DROPDOWN (MỰC IN SÀI GÒN - CHUẨN UI/UX 2026) ===== */

/* Trạng thái giỏ hàng trống: 1 DÒNG DUY NHẤT, icon & text ngang hàng */
.site-header-modern .widget_shopping_cart .ms-mini-cart-empty {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 10px 4px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-empty i {
  font-size: 17px !important;
  color: #64748b !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-empty p,
.site-header-modern .widget_shopping_cart .ms-mini-cart-empty .woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  text-align: left !important;
}

/* Danh sách sản phẩm trong giỏ */
.site-header-modern .widget_shopping_cart .cart_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  text-align: left !important;
}

.site-header-modern .widget_shopping_cart .cart_list li,
.site-header-modern .widget_shopping_cart .cart_list li.ms-mini-cart-item {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative !important;
  gap: 12px !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.site-header-modern .widget_shopping_cart .cart_list li:last-child {
  border-bottom: none !important;
  padding-bottom: 4px !important;
}

/* Khung hình ảnh sản phẩm to lên nhìn cân đối */
.site-header-modern .widget_shopping_cart .ms-mini-cart-thumb {
  flex: 0 0 68px !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  text-align: left !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-thumb a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.site-header-modern .widget_shopping_cart .cart_list li img,
.site-header-modern .widget_shopping_cart .ms-mini-cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Khối thông tin sản phẩm: canh lề trái hoàn toàn */
.site-header-modern .widget_shopping_cart .ms-mini-cart-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-title,
.site-header-modern .widget_shopping_cart .cart_list li a:not(.remove) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  word-break: break-word !important;
  transition: color 0.15s ease !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-title:hover,
.site-header-modern .widget_shopping_cart .cart_list li a:not(.remove):hover {
  color: var(--hdr-brand-red, #ed1c24) !important;
}

/* Thuộc tính phân loại / biến thể: canh lề trái */
.site-header-modern .widget_shopping_cart .ms-mini-cart-variation,
.site-header-modern .widget_shopping_cart .ms-mini-cart-variation * {
  font-size: 11.5px !important;
  color: #64748b !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Số lượng & đơn giá: NẰM BÊN TRÁI, KHÔNG CANH GIỮA */
.site-header-modern .widget_shopping_cart .ms-mini-cart-qty-price,
.site-header-modern .widget_shopping_cart .cart_list li .quantity {
  font-size: 13px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  margin-top: 3px !important;
  padding: 0 !important;
  width: 100% !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-qty {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-align: left !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-price,
.site-header-modern .widget_shopping_cart .ms-mini-cart-price .amount,
.site-header-modern .widget_shopping_cart .cart_list li .quantity .amount {
  color: var(--hdr-brand-red, #ed1c24) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-align: left !important;
}

/* Nút xóa sản phẩm trên góc phải */
.site-header-modern .widget_shopping_cart .ms-mini-cart-remove,
.site-header-modern .widget_shopping_cart .cart_list li a.remove {
  color: #94a3b8 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  transition: all 0.15s ease !important;
}

.site-header-modern .widget_shopping_cart .ms-mini-cart-remove:hover,
.site-header-modern .widget_shopping_cart .cart_list li a.remove:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}

/* Tổng tiền */
.site-header-modern .widget_shopping_cart .total,
.site-header-modern .widget_shopping_cart .ms-mini-cart-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  margin: 0 0 12px 0 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
}

.site-header-modern .widget_shopping_cart .total strong {
  font-weight: 600 !important;
  color: #334155 !important;
}

.site-header-modern .widget_shopping_cart .total .amount {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--hdr-brand-red, #ed1c24) !important;
}

/* 2 Nút hành động: Xem giỏ hàng & Thanh toán */
.site-header-modern .widget_shopping_cart .buttons,
.site-header-modern .widget_shopping_cart .ms-mini-cart-buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-modern .widget_shopping_cart .buttons a {
  flex: 1 !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  transition: all 0.2s ease !important;
}

.site-header-modern .widget_shopping_cart .buttons a:not(.checkout) {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

.site-header-modern .widget_shopping_cart .buttons a:not(.checkout):hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.site-header-modern .widget_shopping_cart .buttons a.checkout {
  background: var(--hdr-brand-red, #ed1c24) !important;
  color: #ffffff !important;
  border: 1px solid var(--hdr-brand-red, #ed1c24) !important;
  box-shadow: 0 2px 6px rgba(237, 28, 36, 0.25) !important;
}

.site-header-modern .widget_shopping_cart .buttons a.checkout:hover {
  background: #c41219 !important;
}

.site-header-modern.is-sticky .widget_shopping_cart {
  top: calc(100% + 4px) !important;
}

@keyframes tdCartFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. NÚT TÀI KHOẢN (DESKTOP): Kính mờ đồng bộ Hotline */
.site-header-modern .td-user-btn,
.site-header-modern .td-user-box {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 13px 0 5px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.site-header-modern .td-user-btn:hover,
.site-header-modern .td-user-box:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px);
}

.site-header-modern .td-user-btn .td-action-icon,
.site-header-modern .td-user-box i {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--hdr-blue, #253989) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.25s ease !important;
}

.site-header-modern .td-user-btn:hover .td-action-icon {
  transform: scale(1.08) !important;
}

.site-header-modern .td-user-btn .td-action-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.site-header-modern .td-user-btn .td-action-sub {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
}

/* Khối văn bản 2 dòng chung */
.site-header-modern .td-action-meta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

/* Thanh tìm kiếm Mobile (Ẩn trên Desktop) */
.site-header-modern .mobile-search-row {
  display: none;
}

/* ==========================================================================
   2. NAVIGATION BAR (NỀN TRẮNG TINH - MENU VIẾT LIỀN 1 DÒNG KHÔNG XUỐNG HÀNG)
   ========================================================================== */
.site-header-modern .after-header,
.site-header .after-header,
.after-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--td-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  position: relative;
  z-index: 100;
}

.site-header-modern .after-header .container {
  display: flex !important;
  align-items: center !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  max-width: 1500px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* THANH ĐIỀU HƯỚNG ROW 2 (CHUẨN NGUYỄN KIM) */
.site-header-modern .after-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--td-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 90 !important;
}

.site-header-modern .sub-nav-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-modern .sub-nav-menu-container {
  width: 100% !important;
}

.site-header-modern .sub-nav-menu {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 42px !important;
  gap: 0 !important;
}

/* Ẩn mục đầu tiên "Danh mục sản phẩm" trên Row 2 vì đã đưa lên Row 1 */
.site-header-modern .sub-nav-menu > li:first-child {
  display: none !important;
}

/* Từng menu item trên Row 2 */
.site-header-modern .sub-nav-menu > li {
  display: inline-flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 42px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  position: relative !important;
}

.site-header-modern .sub-nav-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  text-decoration: none !important;
  background: transparent !important;
}

.site-header-modern .sub-nav-menu > li > a:hover,
.site-header-modern .sub-nav-menu > li.current-menu-item > a {
  color: var(--hdr-brand-red) !important;
}

.site-header-modern .sub-nav-menu > li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 2px !important;
  background: var(--hdr-brand-red) !important;
  opacity: 0 !important;
  transform: scaleX(0) !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.site-header-modern .sub-nav-menu > li > a:hover::after,
.site-header-modern .sub-nav-menu > li.current-menu-item > a::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* ẨN TRIỆT ĐỂ SUBMENU TRÊN ROW 2, CHỈ HIỆN KHI RÊ CHUỘT DẠNG DROPDOWN */
.site-header-modern .sub-nav-menu ul.sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 1000 !important;
}

.site-header-modern .sub-nav-menu > li:hover > ul.sub-menu {
  display: block !important;
}

.site-header-modern .sub-nav-menu ul.sub-menu li {
  display: block !important;
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f8fafc !important;
}

.site-header-modern .sub-nav-menu ul.sub-menu li:last-child {
  border-bottom: none !important;
}

.site-header-modern .sub-nav-menu ul.sub-menu li a {
  display: block !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  line-height: 1.4 !important;
}

.site-header-modern .sub-nav-menu ul.sub-menu li a:hover {
  color: var(--hdr-brand-red) !important;
  background: #f1f5f9 !important;
  padding-left: 22px !important;
}

/* ==========================================================================
   NÚT "DANH MỤC" HÀNG 1 (CHUẨN NGUYỄN KIM) & MEGA MENU DROPDOWN
   ========================================================================== */
.site-header-modern .td-header-cat-wrap {
  position: relative !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nút Danh mục phong cách Nguyễn Kim: Nền trắng bo góc, chữ navy, icon đỏ tươi #ed1c24 */
.site-header-modern .td-header-cat-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: var(--hdr-blue) !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: none !important;
  text-decoration: none !important;
}

.site-header-modern .td-header-cat-btn i {
  color: var(--hdr-brand-red) !important;
  font-size: 15px !important;
  margin-right: 2px !important;
}

.site-header-modern .td-header-cat-btn:hover,
.site-header-modern .td-header-cat-wrap:hover .td-header-cat-btn {
  background: #f8fafc !important;
  color: var(--hdr-brand-red) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Cầu nối vô hình chống mất hover khi di chuyển chuột từ nút hàng 1 xuống dropdown */
.site-header-modern .td-header-cat-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 260px !important;
  height: 18px !important;
  background: transparent !important;
  z-index: 9998 !important;
}

/* KHỐI DROPDOWN MEGA MENU TỔNG THỂ (GỒM CỘT TRÁI 250px VÀ BẢNG PHẢI 820px) */
.site-header-modern .td-mega-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  display: none !important;
  z-index: 9999 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  border-radius: 8px !important;
}

.site-header-modern .td-header-cat-wrap:hover .td-mega-dropdown {
  display: flex !important;
}

/* CỘT DỌC 7 DANH MỤC CỐT LÕI BÊN TRÁI (250px x 400px) */
.site-header-modern .td-mega-left-col,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  z-index: 1000 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ẨN TRIỆT ĐỂ TẤT CẢ CÁC MENU CON BÊN TRONG CỘT TRÁI (CHỈ GIỮ LẠI 7 DANH MỤC CHÍNH) */
.site-header-modern .td-mega-left-col > li > ul.sub-menu,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > ul.sub-menu {
  display: none !important;
}

/* Thanh cuộn mỏng tinh tế cho cột danh mục chính */
.site-header-modern .td-mega-left-col::-webkit-scrollbar,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu::-webkit-scrollbar {
  width: 4px;
}
.site-header-modern .td-mega-left-col::-webkit-scrollbar-thumb,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Từng mục danh mục cha trong cột dọc */
.site-header-modern .td-mega-left-col > li,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f8fafc !important;
  position: relative !important;
  list-style: none !important;
}

.site-header-modern .td-mega-left-col > li:last-child,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li:last-child {
  border-bottom: none !important;
}

/* ẨN TRIỆT ĐỂ BIỂU TƯỢNG » RỜI RẠC DO THEME APPEND */
.site-header-modern .td-mega-left-col > li > i,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > i {
  display: none !important;
}

/* Link của từng danh mục cha - ĐỒNG BỘ 100% VỊ TRÍ, CÓ ICON & MŨI TÊN CANH LỀ */
.site-header-modern .td-mega-left-col > li > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: none !important;
  background: transparent !important;
  min-width: auto !important;
  box-sizing: border-box !important;
}

/* Icon cố định 22px canh lề thẳng tắp cho mọi dòng */
.site-header-modern .td-mega-left-col > li > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  width: 22px !important;
  text-align: center !important;
  margin-right: 10px !important;
  color: var(--hdr-blue) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  content: "\f02b" !important;
}

/* Gán icon chuyên biệt theo từng loại sản phẩm công nghệ */
.site-header-modern .td-mega-left-col > li > a[href*="may-in"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-173 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a[href*="may-in"]::before { content: "\f02f" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="muc-in"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-183 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a[href*="muc-in"]::before { content: "\f043" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="giay-in"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-197 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a[href*="giay-in"]::before { content: "\f0c5" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="vat-tu"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-1649 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a[href*="vat-tu"]::before { content: "\f7d9" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="tem-nhan"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-5835 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a[href*="tem-nhan"]::before { content: "\f02a" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="thiet-bi"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-12684 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li.menu-item-12684 > a::before { content: "\f085" !important; }

.site-header-modern .td-mega-left-col > li > a[href*="decal"]::before,
.site-header-modern .td-mega-left-col > li#menu-item-12685 > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li.menu-item-12685 > a::before { content: "\f5fd" !important; }

/* Trạng thái Hover danh mục cha */
.site-header-modern .td-mega-left-col > li > a:hover,
.site-header-modern .td-mega-left-col > li.active > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a:hover,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li.active > a {
  background: var(--hdr-blue-light) !important;
  color: var(--hdr-blue) !important;
  font-weight: 700 !important;
  padding-left: 18px !important;
}

.site-header-modern .td-mega-left-col > li > a:hover::before,
.site-header-modern .td-mega-left-col > li.active > a::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a:hover::before {
  color: var(--hdr-brand-red) !important;
}

/* Mũi tên góc phải trang nhã */
.site-header-modern .td-mega-left-col > li > a::after,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li > a::after {
  content: "\f105" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-left: auto !important;
  padding-left: 8px !important;
  flex-shrink: 0 !important;
}

.site-header-modern .td-mega-left-col > li:hover > a::after,
.site-header-modern .td-mega-left-col > li.active > a::after,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu > li:hover > a::after {
  color: var(--hdr-blue) !important;
}

/* ==========================================================================
   BẢNG FLYOUT PANEL SUB-CATEGORIES BÊN PHẢI (.namlbn-mega-wrapper)
   - Chiều cao đồng bộ chuẩn 540px, rộng 820px, liền mạch với cột trái
   - Tự động chia 3 cột dọc thẩm mỹ, không tràn chữ, không lộ ra ngoài
   ========================================================================== */
.site-header-modern .td-mega-dropdown .namlbn-mega-wrapper,
.site-header-modern .namlbn-mega-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 250px !important;
  width: 820px !important;
  min-width: 820px !important;
  max-width: 820px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: none !important;
  box-shadow: 10px 15px 35px rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 20px 28px 45px 28px !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: none !important;
}

/* Khi hover thì mở ra phân chia cột ngang (Multi-column) */
.site-header-modern .td-mega-dropdown .namlbn-mega-wrapper.namlbn-show,
.site-header-modern .namlbn-mega-wrapper.namlbn-show,
.site-header-modern .td-mega-dropdown .namlbn-mega-wrapper:hover,
.site-header-modern .namlbn-mega-wrapper:hover {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px 28px !important;
}

/* Triệt tiêu hoàn toàn icon trên mọi link trong flyout panel để giữ văn bản sạch sẽ */
.site-header-modern .namlbn-mega-wrapper a::before,
.site-header-modern .namlbn-mega-wrapper a::after {
  display: none !important;
  content: none !important;
}

/* Từng cột nhóm danh mục con (Rộng 240px, xếp dọc từ trên xuống) */
.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 235px !important;
  max-width: 245px !important;
  flex: 0 0 235px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 10px 0 !important;
  box-sizing: border-box !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* Từng item li trong cột con */
.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
}

/* Tiêu đề nhóm con (MÁY IN CHÍNH HÃNG, MÁY IN THEO CHỨC NĂNG...) */
.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li.mega-submenu-title {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #eef2fc !important;
}

.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li.mega-submenu-title a {
  background: transparent !important;
  color: var(--hdr-blue) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  padding: 0 !important;
  min-width: auto !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li.mega-submenu-title a:hover {
  color: var(--hdr-brand-red) !important;
  background: transparent !important;
}

/* Các link danh mục con bên dưới tiêu đề (Máy in 2 mặt, Máy in A3...) */
.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li:not(.mega-submenu-title) a {
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
  padding: 3.5px 0 !important;
  line-height: 1.45 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  white-space: normal !important;
  text-transform: capitalize !important;
  transition: all 0.15s ease !important;
}

.site-header-modern .namlbn-mega-wrapper ul.namlbn-mega-submenu li:not(.mega-submenu-title) a:hover {
  color: var(--hdr-brand-red) !important;
  background: transparent !important;
  transform: translateX(4px) !important;
}

/* THANH CAM KẾT CHUẨN THÀNH ĐẠT Ở DƯỚI ĐÁY MEGA MENU */
.site-header-modern .namlbn-mega-wrapper::after {
  content: "✓ Hàng chính hãng 100%   •   🛠 Hỗ trợ kỹ thuật tận nơi   •   🚚 Giao hàng toàn quốc" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 38px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: 0.3px !important;
  border-radius: 0 0 8px 0 !important;
  z-index: 10 !important;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
}

/* ==========================================================================
   CÁC MỤC MENU NGANG HÀNG 2 (.after-header / .sub-nav-bar / .sub-nav-menu)
   ========================================================================== */
.site-header-modern .after-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  height: 42px !important;
  min-height: 42px !important;
  position: relative !important;
  z-index: 100 !important;
  display: block !important;
  padding: 0 !important;
}

.site-header-modern .after-header .container {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 1500px !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.site-header-modern .sub-nav-bar,
.site-header-modern .sub-nav-menu-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.site-header-modern ul.sub-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  gap: 4px !important;
}

/* ẨN NÚT "DANH MỤC SẢN PHẨM" CŨ TRÊN ROW 2 (VÌ ĐÃ ĐẨY LÊN HÀNG 1 THEO CHUẨN NGUYỄN KIM) */
.site-header-modern ul.sub-nav-menu > li:first-child,
.site-header-modern ul.sub-nav-menu > li#menu-item-216,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child {
  display: none !important;
}

/* Từng item menu ngang trên Row 2 */
.site-header-modern ul.sub-nav-menu > li:not(:first-child),
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  position: relative !important;
  list-style: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child):hover > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child):hover > a {
  color: var(--hdr-blue) !important;
  background: #f1f5f9 !important;
}

/* Submenu dropdown cho các mục menu con như Bảng giá, Dịch vụ, Blog (CHỈ HIỂN THỊ TRÊN DESKTOP >= 769px) */
@media (min-width: 769px) {
  .site-header-modern ul.sub-nav-menu > li:not(:first-child) > ul.sub-menu,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 230px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 2px solid var(--hdr-blue) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 1000 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: none !important;
  }

  .site-header-modern ul.sub-nav-menu > li:not(:first-child):hover > ul.sub-menu,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child):hover > ul.sub-menu {
    display: block !important;
  }

  .site-header-modern ul.sub-nav-menu > li:not(:first-child) > ul.sub-menu li,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .site-header-modern ul.sub-nav-menu > li:not(:first-child) > ul.sub-menu li a,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > ul.sub-menu li a {
    display: block !important;
    padding: 9px 18px !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  .site-header-modern ul.sub-nav-menu > li:not(:first-child) > ul.sub-menu li a:hover,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > ul.sub-menu li a:hover {
    background: var(--hdr-blue-light) !important;
    color: var(--hdr-blue) !important;
    padding-left: 22px !important;
  }

  /* Icon mũi tên góc phải cho mục menu có cấp con */
  .site-header-modern ul.sub-nav-menu > li.menu-item-has-children:not(:first-child) > a::after,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li.menu-item-has-children:not(:first-child) > a::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    margin-left: 4px;
    color: #94a3b8;
    transition: transform 0.2s ease;
  }

  .site-header-modern ul.sub-nav-menu > li.menu-item-has-children:not(:first-child):hover > a::after,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li.menu-item-has-children:not(:first-child):hover > a::after {
    transform: rotate(180deg);
    color: var(--hdr-blue);
  }
}

/* Mục SẢN PHẨM HOT nổi bật với ngọn lửa đỏ tươi và chữ đỏ, căn đều thẳng mép Logo Mực In Sài Gòn */
.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="san-pham-hot"],
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="san-pham-hot"],
.site-header-modern ul.sub-nav-menu > li#menu-item-12707 > a {
  color: var(--hdr-brand-red) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding-left: 0 !important;
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="san-pham-hot"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="san-pham-hot"]::before {
  content: "\f06d" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  margin-right: 4px !important;
  color: var(--hdr-brand-red) !important;
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="san-pham-hot"]:hover,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="san-pham-hot"]:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="may-in"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="may-in"]::before {
  content: "\f02f";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="muc-in"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="muc-in"]::before {
  content: "\f043";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="bang-gia"]::before,
.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="gia-"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="bang-gia"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="gia-"]::before {
  content: "\f02c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="dich-vu"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="dich-vu"]::before {
  content: "\f590";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="blog"]::before,
.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="bai-viet"]::before,
.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="kien-thuc"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="blog"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="bai-viet"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="kien-thuc"]::before {
  content: "\f02d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

.site-header-modern ul.sub-nav-menu > li:not(:first-child) > a[href*="lien-he"]::before,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a[href*="lien-he"]::before {
  content: "\f095";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
  color: var(--hdr-blue);
}

/* Mục menu đang active */
.site-header-modern ul.sub-nav-menu > li.current-menu-item:not(:first-child) > a,
.site-header-modern ul.sub-nav-menu > li.current_page_item:not(:first-child) > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li.current-menu-item:not(:first-child) > a,
.site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li.current_page_item:not(:first-child) > a {
  background: var(--hdr-blue-light) !important;
  color: var(--hdr-blue) !important;
  border-radius: 6px;
  font-weight: 700;
}

/* ==========================================================================
   3. TRIỆT TIÊU DRAWER MENU TRÊN DESKTOP (MÀN HÌNH >= 769px)
   ========================================================================== */
@media (min-width: 769px) {
  #mobile-menu,
  .site-bgr,
  .mobile-hamburger-btn,
  .mobile-search-row {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1024px) {
  .desktop-user-only {
    display: none !important;
  }
}

/* ==========================================================================
   4. TỐI ƯU TOÀN DIỆN CHO MOBILE (MÀN HÌNH <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Ẩn các khối desktop không cần thiết */
  .desktop-search-only,
  .desktop-user-only,
  .site-header-modern .td-user-btn,
  .site-header-modern .td-user-box,
  .site-header-modern .td-action-meta,
  .site-header-modern .td-hotline-meta,
  .site-header-modern .td-cart-text,
  .site-header-modern .td-cart-meta,
  .site-header-modern .td-logo-slogan {
    display: none !important;
  }

  /* Nút Hamburger 3 gạch */
  .site-header-modern .mobile-hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    text-decoration: none;
    margin-right: 2px;
  }
  .site-header-modern .mobile-hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.28);
  }

  /* Hàng Header chính thu gọn */
  .site-header .main-header,
  .site-header .first-row.main-header,
  .site-header-modern .main-header-row {
    padding: 8px 0 6px !important;
  }
  .site-header-modern .main-header-row .container {
    gap: 8px !important;
    padding: 0 10px !important;
  }

  /* Logo trên Mobile thu gọn xinh xắn */
  .site-header-modern .td-logo-wrap {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .site-header-modern .td-logo-link {
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 6px !important;
  }
  .site-header-modern .td-logo-img {
    height: 30px !important;
    max-height: 32px !important;
  }
  .site-header-modern .td-logo-title,
  .site-header-modern .td-logo-title strong {
    font-size: 13.5px !important;
    letter-spacing: 0.2px !important;
  }

  /* Cụm Tiện ích trên Mobile: Nút tròn đôi Hotline Trắng & Giỏ Hàng Đỏ 36px */
  .site-header-modern .td-actions-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* 1. Hotline trên Mobile: NÚT VIÊN THUỐC NỔI BẬT "Hotline liên hệ" */
  .site-header-modern .td-action-btn.td-hotline-btn,
  .site-header-modern .td-hotline-box {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 34px !important;
    padding: 0 10px 0 6px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1.5px solid var(--hdr-brand-red, #ed1c24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transform: none !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
  }

  .site-header-modern .td-action-btn.td-hotline-btn:active,
  .site-header-modern .td-hotline-box:active {
    transform: scale(0.96) !important;
    background: #fff5f5 !important;
  }

  .site-header-modern .td-action-btn.td-hotline-btn .td-action-icon,
  .site-header-modern .td-hotline-box .td-hotline-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    background: rgba(237, 28, 36, 0.1) !important;
    color: var(--hdr-brand-red, #ed1c24) !important;
    font-size: 11px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transform: none !important;
  }

  .site-header-modern .td-action-btn.td-hotline-btn .td-action-icon i,
  .site-header-modern .td-hotline-box .td-hotline-icon i {
    animation: td-phone-ring 2.5s infinite ease-in-out !important;
  }

  .site-header-modern .td-hotline-mobile-text {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--hdr-brand-red, #ed1c24) !important;
    white-space: nowrap !important;
    letter-spacing: 0.1px !important;
    line-height: 1 !important;
  }

  @media (max-width: 360px) {
    .site-header-modern .td-action-btn.td-hotline-btn,
    .site-header-modern .td-hotline-box {
      padding: 0 7px 0 5px !important;
      height: 32px !important;
      gap: 4px !important;
    }
    .site-header-modern .td-hotline-mobile-text {
      font-size: 10.5px !important;
    }
    .site-header-modern .td-action-btn.td-hotline-btn .td-action-icon,
    .site-header-modern .td-hotline-box .td-hotline-icon {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px !important;
      font-size: 10px !important;
    }
  }

  /* 2. Giỏ Hàng trên Mobile: Nút tròn ĐỎ RỰC RỠ 36px, icon trắng, badge vàng chanh */
  .site-header-modern .td-cart-box,
  .site-header-modern .td-cart-wrap {
    position: relative !important;
    display: inline-flex !important;
  }

  .site-header-modern .td-cart-box > a,
  .site-header-modern .td-cart-wrap > a,
  .site-header-modern a.cart-contents,
  .site-header-modern .td-action-btn.td-cart-btn,
  .site-header-modern .td-cart-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ed1c24 0%, #c41219 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(237, 28, 36, 0.5) !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .site-header-modern a.cart-contents .td-action-icon,
  .site-header-modern .td-cart-box a > i.fa-shopping-cart,
  .site-header-modern a.cart-contents > i.fa-shopping-cart,
  .site-header-modern .td-cart-icon-wrap {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* Badge số lượng trên Mobile */
  .site-header-modern a.cart-contents .cart-count,
  .site-header-modern .td-cart-box .cart-count,
  .site-header-modern .td-cart-wrap .cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ffeb3b !important;
    color: #c41219 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 3px !important;
    border-radius: 9px !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  .site-header-modern .td-action-btn.td-hotline-btn:active,
  .site-header-modern .td-cart-box > a:active,
  .site-header-modern a.cart-contents:active {
    transform: scale(0.92) !important;
  }

  /* Thanh tìm kiếm FiboSearch full chiều ngang ở hàng 2 */
  .site-header-modern .mobile-search-row {
    display: block !important;
    padding: 4px 10px 10px !important;
    background: var(--hdr-blue) !important;
  }
  .site-header-modern .mobile-search-row .container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .site-header-modern .mobile-search-row .dgwt-wcas-search-input {
    height: 38px !important;
    font-size: 13px !important;
  }
  .site-header-modern .mobile-search-row .dgwt-wcas-search-submit {
    height: 38px !important;
    padding: 0 16px !important;
  }

  /* THANH ĐIỀU HƯỚNG NGANG VUỐT CHẠM (SWIPEABLE TABS) TRÊN MOBILE - KHÔNG TRƯỢT DỌC */
  .site-header-modern .after-header {
    background: #ffffff !important;
    overflow-x: auto !important;
    overflow-y: hidden !important; /* TRIỆT TIÊU HOÀN TOÀN TRƯỢT DỌC TRÊN MOBILE */
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
    height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--td-border) !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .site-header-modern .after-header::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
  .site-header-modern .after-header .container {
    width: max-content !important;
    max-width: none !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    overflow-y: hidden !important;
  }

  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ẨN CỤM DANH MỤC VÀ TÌM KIẾM DESKTOP TRÊN MOBILE */
  .site-header-modern .desktop-cat-only,
  .site-header-modern .desktop-search-only,
  .site-header-modern .desktop-user-only,
  .site-header-modern .namlbn-mega-wrapper {
    display: none !important;
  }

  /* THANH ĐIỀU HƯỚNG ROW 2 DẠNG PILL VUỐT CHẠM TRÊN MOBILE */
  .site-header-modern .sub-nav-bar {
    height: 100% !important;
    overflow-y: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header-modern .sub-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow-y: hidden !important;
  }

  /* TRIỆT TIÊU HOÀN TOÀN MỌI MENU CON & MỤC DANH MỤC TRÊN THANH MOBILE */
  .site-header-modern .after-header ul.sub-menu,
  .site-header-modern .after-header .sub-menu,
  .site-header-modern .after-header li ul,
  .site-header-modern .sub-nav-menu ul.sub-menu,
  .site-header-modern .sub-nav-menu .sub-menu,
  .site-header-modern .sub-nav-menu li ul,
  .site-header-modern .sub-nav-menu li:hover ul.sub-menu,
  .site-header-modern .sub-nav-menu li:focus ul.sub-menu,
  .site-header-modern .sub-nav-menu li:active ul.sub-menu,
  .site-header-modern .sub-nav-menu > li:not(:first-child):hover > ul.sub-menu,
  .site-header-modern .sub-nav-menu > li:first-child,
  .site-header-modern .sub-nav-menu > li#menu-item-216,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:first-child > ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  /* ẨN MŨI TÊN DROPDOWN TRÊN CÁC NÚT PILL MOBILE */
  .site-header-modern .sub-nav-menu > li > a::after,
  .site-header-modern .sub-nav-menu > li.menu-item-has-children > a::after,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li > a::after {
    display: none !important;
    content: none !important;
  }

  .site-header-modern .sub-nav-menu > li {
    margin: 0 !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header-modern .sub-nav-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: #f3f4f6 !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .site-header-modern .sub-nav-menu > li:hover > a,
  .site-header-modern .sub-nav-menu > li.current-menu-item > a {
    background: var(--hdr-blue) !important;
    color: #ffffff !important;
  }

  .site-header-modern .sub-nav-menu > li > a[href*="san-pham-hot"] {
    color: var(--hdr-brand-red) !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    font-weight: 700 !important;
  }

  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child) > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: #f3f4f6 !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child):hover > a,
  .site-header-modern .main-menu .menu-menu-chinh-container > ul.menu > li:not(:first-child).current-menu-item > a {
    background: var(--hdr-blue) !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   5. DRAWER MENU MOBILE (#mobile-menu) - CHỈ DÙNG TRÊN MOBILE KHI BẤM NÚT 3 GẠCH
   ========================================================================== */
#mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 82% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 99999 !important;
  transform: translateX(-105%) !important;
  -webkit-transform: translateX(-105%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  visibility: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#mobile-menu.show {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  visibility: visible !important;
}

.site-bgr {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 99998 !important;
  display: none;
}

#close-menu {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  background: #f1f5f9 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #333333 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  z-index: 100 !important;
  transition: all 0.2s ease !important;
}

#close-menu:hover {
  background: var(--hdr-blue) !important;
  color: #ffffff !important;
}

#mobile-menu ul.menu {
  padding: 55px 0 30px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  list-style: none !important;
  margin: 0 !important;
}

#mobile-menu ul li {
  list-style: none !important;
  position: relative !important;
}

#mobile-menu ul li a {
  display: block !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
}

#mobile-menu ul li a:hover,
#mobile-menu ul li.current-menu-item > a {
  color: var(--hdr-blue) !important;
  background: var(--hdr-blue-light) !important;
}

#mobile-menu ul li.menu-item-has-children span.mobile-menu-toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 44px !important;
  width: 44px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

#mobile-menu ul li.menu-item-has-children span.mobile-menu-toggle i {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mobile-menu ul.sub-menu {
  display: none;
  background: #f8fafc !important;
  padding: 0 !important;
  list-style: none !important;
}

#mobile-menu ul.sub-menu li {
  position: relative !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

#mobile-menu ul.sub-menu li a {
  padding-left: 28px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

#mobile-menu ul.sub-menu ul.sub-menu {
  background: #f1f5f9 !important;
}

#mobile-menu ul.sub-menu ul.sub-menu li a {
  padding-left: 44px !important;
  font-size: 13px !important;
  color: #475569 !important;
}

#mobile-menu ul.sub-menu ul.sub-menu ul.sub-menu {
  background: #e2e8f0 !important;
}

#mobile-menu ul.sub-menu ul.sub-menu ul.sub-menu li a {
  padding-left: 60px !important;
  font-size: 12.5px !important;
  color: #64748b !important;
}

/* Tránh đẩy site-content lệch ngang gây bể layout trên mobile */
#site-content.content-move {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ==========================================================================
   6. GHIM HEADER HÀNG 1 THU GỌN (PHƯƠNG ÁN 1 - CHUẨN NGUYỄN KIM)
   ========================================================================== */
@keyframes tdHeaderSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Khoảng đệm chống giật trang (Layout shift / CLS) khi Hàng 1 chuyển sang fixed */
.site-header-modern.is-sticky {
  padding-top: 68px !important;
}

/* Hàng 1 cố định trên cùng màn hình khi cuộn trang */
.site-header-modern.is-sticky .main-header-row {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: var(--hdr-blue) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2) !important;
  padding: 6px 0 !important;
  animation: tdHeaderSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: padding 0.2s ease, box-shadow 0.2s ease !important;
}

/* Tương thích thanh Admin Bar khi quản trị viên đăng nhập */
body.admin-bar .site-header-modern.is-sticky .main-header-row {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .site-header-modern.is-sticky .main-header-row {
    top: 46px !important;
  }
}

/* Thu gọn nhẹ Logo khi ghim */
.site-header-modern.is-sticky .td-logo-link {
  padding: 4px 10px !important;
  gap: 8px !important;
}

.site-header-modern.is-sticky .td-logo-img {
  height: 32px !important;
  max-height: 32px !important;
}

.site-header-modern.is-sticky .td-logo-title,
.site-header-modern.is-sticky .td-logo-title strong {
  font-size: 15px !important;
}

.site-header-modern.is-sticky .td-logo-slogan {
  display: none !important;
}

/* Thu gọn nút "Danh mục" khi ghim */
.site-header-modern.is-sticky .td-header-cat-btn {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
}

/* Đặt dropdown Mega Menu sát đáy header khi ghim */
.site-header-modern.is-sticky .td-mega-dropdown {
  top: calc(100% + 4px) !important;
}

/* Thu gọn ô tìm kiếm FiboSearch khi ghim */
.site-header-modern.is-sticky .td-search-wrap .dgwt-wcas-search-input {
  height: 36px !important;
  font-size: 13px !important;
}

.site-header-modern.is-sticky .td-search-wrap .dgwt-wcas-search-submit {
  height: 36px !important;
  padding: 0 18px !important;
}

/* Thu gọn cụm Hotline, Giỏ hàng và Đăng nhập khi ghim trên Desktop */
.site-header-modern.is-sticky .td-action-btn,
.site-header-modern.is-sticky .td-hotline-btn,
.site-header-modern.is-sticky .td-hotline-box,
.site-header-modern.is-sticky .td-cart-box > a,
.site-header-modern.is-sticky a.cart-contents,
.site-header-modern.is-sticky .td-user-btn,
.site-header-modern.is-sticky .td-user-box {
  height: 36px !important;
  padding: 0 11px 0 4px !important;
}

.site-header-modern.is-sticky .td-action-icon,
.site-header-modern.is-sticky .td-hotline-icon,
.site-header-modern.is-sticky a.cart-contents .td-action-icon,
.site-header-modern.is-sticky a.cart-contents > i.fa-shopping-cart,
.site-header-modern.is-sticky .td-user-btn .td-action-icon,
.site-header-modern.is-sticky .td-user-box i {
  width: 26px !important;
  height: 26px !important;
  font-size: 11.5px !important;
  margin-right: 6px !important;
}

.site-header-modern.is-sticky .td-action-title,
.site-header-modern.is-sticky a.cart-contents .td-action-title,
.site-header-modern.is-sticky .td-user-btn .td-action-title {
  font-size: 12px !important;
}

.site-header-modern.is-sticky .td-hotline-num {
  font-size: 12px !important;
  font-weight: 800 !important;
}

.site-header-modern.is-sticky .td-hotline-sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.site-header-modern.is-sticky .td-action-sub,
.site-header-modern.is-sticky a.cart-contents .td-action-sub,
.site-header-modern.is-sticky .td-user-btn .td-action-sub {
  font-size: 9px !important;
}

/* TỐI ƯU GHIM TRÊN MOBILE (<= 768px) */
@media (max-width: 768px) {
  .site-header-modern.is-sticky {
    padding-top: 48px !important;
  }

  .site-header-modern.is-sticky .main-header-row {
    padding: 5px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
  }

  .site-header-modern.is-sticky .td-logo-img {
    height: 26px !important;
    max-height: 26px !important;
  }

  .site-header-modern.is-sticky .td-logo-title,
  .site-header-modern.is-sticky .td-logo-title strong {
    font-size: 12.5px !important;
  }

  .site-header-modern.is-sticky .td-action-btn.td-hotline-btn,
  .site-header-modern.is-sticky .td-hotline-box {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 30px !important;
    padding: 0 8px 0 5px !important;
    border-radius: 20px !important;
  }

  .site-header-modern.is-sticky .td-action-btn.td-hotline-btn .td-action-icon,
  .site-header-modern.is-sticky .td-hotline-box .td-hotline-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 9.5px !important;
  }

  .site-header-modern.is-sticky .td-hotline-mobile-text {
    font-size: 10.5px !important;
  }

  .site-header-modern.is-sticky .td-cart-box > a,
  .site-header-modern.is-sticky a.cart-contents,
  .site-header-modern.is-sticky .td-action-btn.td-cart-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
  }

  .site-header-modern.is-sticky a.cart-contents .td-action-icon,
  .site-header-modern.is-sticky a.cart-contents > i.fa-shopping-cart {
    font-size: 13px !important;
  }

  .site-header-modern.is-sticky a.cart-contents .cart-count,
  .site-header-modern.is-sticky .td-cart-box .cart-count {
    top: -3px !important;
    right: -3px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9.5px !important;
  }

  .site-header-modern.is-sticky .mobile-hamburger-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* ==========================================================================
   HERO BANNER NGUYỄN KIM & 8 Ô TRÒN DANH MỤC SẢN PHẨM (MUCINSAIGON.COM)
   - Tối ưu chuẩn UX/UI: Vừa vặn 100% khung hình Above The Fold
   - Bảng màu: Đỏ #ed1c24, Xanh Navy #253989, Vàng kim #ffe082, Nền xám #f1f3f6
   ========================================================================== */

#sc-1.page-section {
  padding-top: 10px !important;
  padding-bottom: 12px !important;
}

/* 1. KHUNG SLIDER BANNER CHÍNH */
#sc-1 .banner {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#sc-1 .banner .col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 1. KHUNG BANNER SLIDER - TỶ LỆ CHUẨN 1376/391 (TRÀN ĐẦY 100% 2 MÉP TRÁI PHẢI, ĐÚNG CHIỀU CAO VẠCH ĐỎ, KHÔNG HỞ TRẮNG) */
.banner-slide {
  border-radius: 0 !important; /* Không bo tròn làm mất góc cạnh của hình ảnh */
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1376 / 391 !important; /* KHÓA TỶ LỆ CHUẨN: CAO TỰ NHIÊN ĐÚNG VẠCH ĐỎ, TRÀN KÍN 2 BÊN TRÁI PHẢI */
  height: auto !important;
  background: #ffffff !important;
}

.banner-slide .slick-list {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.banner-slide .slick-track {
  height: 100% !important;
  display: flex !important;
}

.banner-slide .slide-item {
  height: 100% !important;
  outline: none !important;
  background: #ffffff !important;
}

.banner-slide .slide-item > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  line-height: 0 !important;
  background: #ffffff !important;
}

/* Triệt tiêu hoàn toàn mã padding-bottom: 47% từ theme cũ gây ra khoảng trống trắng rỗng */
.banner-slide .slide-item > a:before,
.banner-slide .slide-item > a::before {
  content: none !important;
  display: none !important;
  padding-bottom: 0 !important;
  height: 0 !important;
}

.banner-slide img,
.banner-slide .slide-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* PHỦ KÍN 100% 2 MÉP BÊN CẠNH, KHÔNG BỊ HỞ TRẮNG 2 BÊN */
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important; /* GIỮ NGUYÊN GÓC CẠNH VUÔNG VẮN 100% CỦA HÌNH ẢNH */
  margin: 0 !important;
}

/* Nút mũi tên Slick Slider căn chuẩn giữa chiều cao linh hoạt của banner */
.banner-slide .slick-prev,
.banner-slide .slick-next {
  width: 40px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 50% !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.25s ease !important;
}

.banner-slide .slick-prev {
  left: 14px !important;
}

.banner-slide .slick-next {
  right: 14px !important;
}

.banner-slide .slick-prev:hover,
.banner-slide .slick-next:hover {
  background: #ffffff !important;
  color: #ed1c24 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.banner-slide .slick-prev::before,
.banner-slide .slick-next::before {
  display: none !important;
}

/* 2. CHỐNG LỖI XỔ RA CÁC BANNER TRƯỚC VÀ TRONG KHI SLICK CHẠY */
.banner-slide:not(.slick-initialized) {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1376 / 391 !important;
  height: auto !important;
  overflow: hidden !important;
}

.banner-slide:not(.slick-initialized) .slide-item:not(:first-child) {
  display: none !important;
}

.banner-slide.slick-initialized {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1376 / 391 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* 3. KHUNG 8 Ô TRÒN DANH MỤC SẢN PHẨM CHUẨN NGUYỄN KIM (TO VÀ CÂN ĐỐI) */
.after-banner,
.nk-cat-wrapper {
  margin-top: 14px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #edf2f7 !important;
  padding: 16px 14px 14px !important;
  box-sizing: border-box !important;
}

/* Ẩn danh sách 5 icon cũ của theme */
.after-banner .after-banner-list {
  display: none !important;
}

.nk-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 12px 8px !important;
  align-items: start !important;
  justify-items: center !important;
}

.nk-cat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
  padding: 4px 2px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.nk-cat-circle {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: #f2f4f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  border: 1px solid #e5e9f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

.nk-cat-img {
  max-width: 68px !important;
  max-height: 68px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.28s ease !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.07)) !important;
}

.nk-cat-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  margin-top: 2px !important;
}

/* Micro-interaction khi hover chuẩn phong cách Nguyễn Kim */
.nk-cat-item:hover .nk-cat-circle {
  transform: translateY(-4px) scale(1.05) !important;
  background: #e8ebf0 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

.nk-cat-item:hover .nk-cat-img {
  transform: scale(1.08) !important;
}

.nk-cat-item:hover .nk-cat-title {
  color: #ed1c24 !important;
}

/* 4. RESPONSIVE CHUẨN UX/UI CHO TABLET VÀ MOBILE */
@media (max-width: 991px) {
  .banner-slide,
  .banner-slide .slick-list,
  .banner-slide .slick-track,
  .banner-slide .slide-item,
  .banner-slide .slide-item > a,
  .banner-slide:not(.slick-initialized),
  .banner-slide.slick-initialized {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1376 / 391 !important;
    border-radius: 0 !important;
  }

  .banner-slide img,
  .banner-slide .slide-item img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .nk-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px 10px !important;
  }

  .nk-cat-circle {
    width: 78px !important;
    height: 78px !important;
  }

  .nk-cat-img {
    max-width: 55px !important;
    max-height: 55px !important;
  }

  .nk-cat-title {
    font-size: 12px !important;
  }
}

@media (max-width: 767px) {
  #sc-1.page-section {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }

  .banner-slide,
  .banner-slide .slick-list,
  .banner-slide .slick-track,
  .banner-slide .slide-item,
  .banner-slide .slide-item > a,
  .banner-slide:not(.slick-initialized),
  .banner-slide.slick-initialized {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1376 / 391 !important;
    border-radius: 0 !important;
  }

  .banner-slide img,
  .banner-slide .slide-item img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .after-banner,
  .nk-cat-wrapper {
    margin-top: 8px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }

  .nk-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px 4px !important;
  }

  .nk-cat-circle {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 4px !important;
  }

  .nk-cat-img {
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .nk-cat-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* ==========================================================================
   CELLPHONES DUAL-TAB PRODUCT SECTION (PHONG CÁCH NGUYỄN KIM: LIỀN KHỐI, BỎ VIỀN KẺ)
   ========================================================================== */
.cps-outer-box {
  margin-top: 14px !important;
  margin-bottom: 22px !important;
  background: linear-gradient(180deg, #edf6ff 0%, #f7faff 35%, #ffffff 100%) !important;
  border: none !important; /* XÓA BỎ VIỀN KẺ STROKE CHUẨN NGUYỄN KIM */
  border-radius: 20px !important;
  padding: 18px 20px 22px !important;
  box-shadow: 0 10px 35px rgba(0, 102, 255, 0.12) !important; /* ĐỔ BÓNG MỜ NỔI KHỐI SANG TRỌNG */
  position: relative !important;
  clear: both !important;
  background-size: cover !important;
  background-position: center top !important;
  overflow: visible !important; /* CHO PHÉP ĐỒ HỌA 3D & MẶT TRĂNG NHÔ CAO KHÔNG BỊ CẮT */
}

/* 1. Thanh 2 Tab Segmented Switcher chia đều 50:50 nguyên khối cao cấp */
.cps-top-tabs-bar.cps-tabs-50-50 {
  display: flex !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #d4e7fe !important;
  border-radius: 14px !important;
  padding: 5px !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.05) !important;
}

.cps-tabs-50-50 .cps-tab-item {
  flex: 1 1 50% !important;
  width: 50% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  text-decoration: none !important;
  display: flex !important;
}

.cps-tabs-50-50 .cps-tab-btn-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  color: #4b5563 !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  line-height: 1.2 !important;
}

.cps-tabs-50-50 .cps-tab-btn-pill .cps-flame,
.cps-tabs-50-50 .cps-tab-btn-pill .cps-bolt {
  font-size: 18px !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.cps-tab-icon-img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Tab Active: Gradient xanh dương - cyan rực rỡ */
.cps-tabs-50-50 .cps-tab-item.active .cps-tab-btn-pill {
  background: linear-gradient(90deg, #0066ff 0%, #00b4d8 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

.cps-tabs-50-50 .cps-tab-item:hover:not(.active) .cps-tab-btn-pill {
  background: #dbeafe !important;
  color: #0066ff !important;
}

/* Banner trong Section (TRÀN SÁT MÉP ĐỈNH & 2 BÊN, KHÔNG CẮT HỌA TIẾT NHÔ CAO) */
.cps-section-banner-wrap {
  width: calc(100% + 40px) !important;
  margin: -18px -20px 16px -20px !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important; /* KHÔNG CẮT MẶT TRĂNG HAY ĐỒ HỌA 3D */
  text-align: center !important;
  display: block !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.cps-section-banner-wrap a {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

.cps-section-banner-wrap img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: transform 0.3s ease !important;
}

.cps-section-banner-wrap a:hover img {
  transform: scale(1.008) !important;
}

.cps-section-banner-wrap a:hover img {
  transform: scale(1.008) !important;
}

/* 2. Hàng nút lọc danh mục con dạng viên thuốc cũ - Đã ẩn theo yêu cầu khách hàng */
.cps-subcat-bar,
.cps-subcat-pill {
  display: none !important;
}

/* 2.1 Hàng nút lọc viên thuốc động mới quản trị qua Admin (Dynamic Sub-Pills Bar) */
.cps-pills-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 8px !important;
  padding: 4px 2px 12px 2px !important;
  margin-bottom: 14px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.cps-pills-bar::-webkit-scrollbar {
  display: none !important;
}

.cps-pill-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  line-height: 1.3 !important;
  outline: none !important;
}

.cps-pill-btn:hover {
  background: #fee2e2 !important;
  border-color: #ed1c24 !important;
  color: #ed1c24 !important;
}

.cps-pill-btn.active {
  background: #ed1c24 !important;
  border-color: #ed1c24 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(237, 28, 36, 0.35) !important;
  font-weight: 700 !important;
}

@media (min-width: 769px) {
  .cps-pills-bar {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
    margin-bottom: 16px !important;
  }
  .cps-pill-btn {
    font-size: 13.5px !important;
    padding: 7px 20px !important;
  }
}

.cps-subtab-pane {
  position: relative !important;
  width: 100% !important;
}

/* 3. Slider Pane & Slick */
.cps-tab-pane {
  position: relative !important;
  width: 100% !important;
}

.cps-products-slider {
  margin: 0 -8px !important;
  position: relative !important;
}

.cps-products-slider .slick-list {
  padding: 6px 2px !important;
  overflow: hidden !important;
}

.cps-products-slider .slick-slide {
  padding: 0 8px !important;
  height: auto !important;
}

/* 4. Thẻ Card Sản Phẩm */
.cps-card-col {
  height: 100% !important;
  display: flex !important;
}

.cps-card-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.cps-card-item:hover {
  border-color: #0066ff !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* Hàng huy hiệu giảm giá đỏ vát góc trên cùng */
.cps-card-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 24px !important;
  margin-bottom: 6px !important;
}

.cps-ribbon-discount {
  background: #e11b1e !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 2.5px 8px !important;
  border-radius: 4px !important;
  line-height: 1.3 !important;
  display: inline-block !important;
}

.cps-badge-empty {
  display: inline-block !important;
  width: 1px !important;
  height: 1px !important;
}

/* Tên thương hiệu in hoa - Đã ẩn theo yêu cầu khách hàng */
.cps-card-brand {
  display: none !important;
}

/* Thumbnail sản phẩm 1:1 */
.cps-card-thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.cps-card-thumb a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.cps-card-thumb .cps-img {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transition: transform 0.35s ease !important;
}

.cps-card-item:hover .cps-card-thumb .cps-img {
  transform: scale(1.06) !important;
}

/* Tiêu đề sản phẩm hiển thị ĐẦY ĐỦ 100%, không che khuất / cắt ngắn */
.cps-card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 0 8px !important;
  min-height: 48px !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  word-wrap: break-word !important;
  color: #111827 !important;
  text-shadow: none !important;
  filter: none !important;
}

.cps-card-title a {
  color: #111827 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: color 0.2s ease !important;
  display: inline !important;
}

.cps-card-item:hover .cps-card-title a {
  color: #0066ff !important;
}

/* Khối giá sản phẩm */
.cps-card-price-box {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  min-height: 24px !important;
}

.cps-price-current {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #d70018 !important;
  line-height: 1.2 !important;
}

.cps-price-current .woocommerce-Price-amount {
  color: #d70018 !important;
  font-weight: 800 !important;
}

.cps-price-old {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
}

.cps-price-old .woocommerce-Price-amount {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.cps-price-current.cps-contact {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #d70018 !important;
}

/* Hộp quà tặng / ưu đãi bổ sung */
.cps-card-promobox {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  min-height: 38px !important;
  margin-bottom: 10px !important;
}

.cps-card-promobox i {
  color: #059669 !important;
  margin-right: 4px !important;
}

/* Nút hành động Xem chi tiết trên card */
.cps-card-action {
  margin-top: auto !important;
  padding-top: 6px !important;
}

.cps-btn-view-detail {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 12px !important;
  background: #f0f7ff !important;
  color: #0066ff !important;
  border: 1px solid #cce3ff !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.cps-card-item:hover .cps-btn-view-detail {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important;
}

/* 5. Nút Mũi Tên Trượt Slick Slider */
.cps-products-slider .cps-arrow {
  position: absolute !important;
  top: 46% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  color: #1e293b !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 15 !important;
  transition: all 0.25s ease !important;
  outline: none !important;
  padding: 0 !important;
}

.cps-products-slider .cps-arrow:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.4) !important;
}

.cps-products-slider .cps-prev {
  left: -16px !important;
}

.cps-products-slider .cps-next {
  right: -16px !important;
}

/* 6. Nút Xem tất cả phía dưới căn giữa */
.cps-bottom-view-all {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 20px !important;
  padding-top: 10px !important;
}

.cps-view-all-btn-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 28px !important;
  background: #ffffff !important;
  color: #0066ff !important;
  border: 1.5px solid #0066ff !important;
  border-radius: 25px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.12) !important;
  transition: all 0.25s ease !important;
}

.cps-view-all-btn-action:hover {
  background: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.35) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* 7. Responsive: Tablet & Mobile */
@media (max-width: 991px) {
  .cps-outer-box {
    padding: 14px 14px 20px !important;
    border-radius: 16px !important;
  }
  .cps-section-banner-wrap {
    width: calc(100% + 28px) !important;
    margin: -14px -14px 12px -14px !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .cps-products-slider .cps-prev {
    left: -8px !important;
  }
  .cps-products-slider .cps-next {
    right: -8px !important;
  }
}

@media (max-width: 767px) {
  .cps-outer-box {
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
  .cps-section-banner-wrap {
    width: calc(100% + 20px) !important;
    margin: -12px -10px 10px -10px !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .cps-top-tabs-bar.cps-tabs-50-50 {
    margin-bottom: 12px !important;
    padding: 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }
  .cps-tabs-50-50 .cps-tab-btn-pill {
    padding: 8px 6px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }
  .cps-tabs-50-50 .cps-tab-btn-pill .cps-flame,
  .cps-tabs-50-50 .cps-tab-btn-pill .cps-bolt {
    font-size: 14px !important;
  }
  .cps-subcat-pill {
    padding: 4px 12px !important;
    font-size: 11px !important;
  }
  .cps-card-item {
    padding: 8px !important;
    border-radius: 10px !important;
  }
  .cps-card-title {
    font-size: 12px !important;
    min-height: 40px !important;
    margin-bottom: 6px !important;
  }
  .cps-price-current {
    font-size: 13.5px !important;
  }
  .cps-card-promobox {
    font-size: 9.5px !important;
    padding: 4px 6px !important;
    min-height: 32px !important;
  }
  .cps-ribbon-discount {
    font-size: 10px !important;
    padding: 1.5px 5px !important;
  }
  .cps-btn-view-detail {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .cps-view-all-btn-action {
    padding: 8px 20px !important;
    font-size: 12.5px !important;
  }
  .cps-products-slider .cps-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  .cps-products-slider .cps-prev {
    left: -4px !important;
  }
  .cps-products-slider .cps-next {
    right: -4px !important;
  }
}

/* ==========================================================================
   LAYOUT 3: SECTION KHỐI DANH MỤC TRANG CHỦ (MÁY IN - MỰC IN - GIẤY IN)
   CHUẨN ĐIỆN MÁY / NGUYỄN KIM - KHUNG HÌNH 100% GỌN GÀNG SẮC NÉT
   ========================================================================== */

.ms-layout3-box,
.ms-layout4-box,
.ms-layout5-box {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 18px 20px 22px !important;
  box-sizing: border-box !important;
  position: relative !important;
  clear: both !important;
}

/* Hàng 1: Category Navigation Tabs (MÁY IN - MỰC IN - GIẤY IN) FULL WIDTH CHIA 3 Ô ĐỒNG ĐỀU, CHỮ ĐỎ */
.ms-layout3-tabs-bar,
.ms-layout5-tabs-bar {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.ms-layout3-tabs-bar::-webkit-scrollbar,
.ms-layout5-tabs-bar::-webkit-scrollbar {
  display: none !important;
}

.ms-tab-nav-btn,
.ms-layout5-tab-btn {
  flex: 1 1 0 !important;
  width: 33.333% !important;
  background: #ffffff !important;
  border: none !important;
  border-right: 1px solid #e5e7eb !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 12px 10px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #c41219 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: -1px !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.ms-tab-nav-btn:first-child,
.ms-layout5-tab-btn:first-child {
  border-left: 1px solid #e5e7eb !important;
}

.ms-tab-nav-btn:hover,
.ms-layout5-tab-btn:hover {
  background: #fffafa !important;
  color: #ed1c24 !important;
}

.ms-tab-nav-btn.active,
.ms-layout5-tab-btn.active {
  background: #fff5f5 !important;
  color: #c41219 !important;
  border-bottom: 3px solid #ed1c24 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Hàng 2: Sub-categories Pills dạng viên thuốc */
.ms-subcat-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.ms-subcat-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  outline: none !important;
}

.ms-subcat-pill:hover {
  border-color: #ed1c24 !important;
  color: #ed1c24 !important;
  background: #fffafa !important;
}

.ms-subcat-pill.active {
  border-color: #ed1c24 !important;
  color: #ed1c24 !important;
  background: #fff5f5 !important;
  font-weight: 600 !important;
}

/* Hàng 3: Banner tương ứng từng category */
.ms-layout3-banner-wrap {
  width: 100% !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.ms-layout3-banner-link {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
}

.ms-layout3-banner-img {
  width: 100% !important;
  height: auto !important;
  max-height: 160px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.ms-layout3-banner-link:hover .ms-layout3-banner-img {
  transform: scale(1.015) !important;
}

/* Hàng 4 & 5: Lưới 10 Sản phẩm (2 hàng x 5 sản phẩm/hàng) */
.ms-products-grid-5cols {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

/* Ẩn các card dự phòng vượt quá 10 khi ở trạng thái mặc định */
.ms-card-col.ms-card-extra {
  display: none !important;
}

.ms-card-col {
  display: flex !important;
}

.ms-card-item {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 10px 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.ms-card-item:hover,
.ms-layout3-box .cps-card-item:hover,
.ms-layout4-box .cps-card-item:hover,
.ms-layout5-box .cps-card-item:hover {
  border-color: #0066ff !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15) !important;
  transform: translateY(-4px) !important;
}

.ms-layout3-box .cps-card-title,
.ms-layout4-box .cps-card-title,
.ms-layout5-box .cps-card-title,
.ms-card-item .cps-card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #111827 !important;
  text-shadow: none !important;
  filter: none !important;
  min-height: 48px !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  display: block !important;
  word-break: break-word !important;
  margin-bottom: 8px !important;
}

.ms-layout3-box .cps-card-title a,
.ms-layout4-box .cps-card-title a,
.ms-layout5-box .cps-card-title a,
.ms-card-item .cps-card-title a {
  color: #111827 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: color 0.2s ease !important;
  display: inline !important;
}

.ms-layout3-box .cps-card-promobox,
.ms-layout4-box .cps-card-promobox,
.ms-layout5-box .cps-card-promobox {
  margin-bottom: 8px !important;
}

/* Chân Section: Nút Xem thêm sản phẩm >>> */
.ms-layout3-bottom-action {
  text-align: center !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 4px !important;
}

.ms-btn-view-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ed1c24 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 6px 20px !important;
  border-radius: 20px !important;
  transition: all 0.25s ease !important;
}

.ms-btn-view-more:hover {
  color: #b91c1c !important;
  transform: translateX(3px) !important;
}

.ms-no-products {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 30px !important;
  color: #6b7280 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN CHO KHỐI LAYOUT 3
   ========================================================================== */
@media (max-width: 1199px) {
  .ms-products-grid-5cols {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 991px) {
  .ms-products-grid-5cols {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .ms-tab-nav-btn,
  .ms-layout5-tab-btn {
    padding: 9px 18px !important;
    font-size: 14.5px !important;
  }
  .ms-layout3-banner-img {
    max-height: 140px !important;
  }
}

@media (max-width: 767px) {
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box {
    padding: 10px 10px 14px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
  }
  .ms-layout3-tabs-bar {
    justify-content: flex-start !important;
    padding-bottom: 0 !important;
  }
  .ms-tab-nav-btn {
    padding: 10px 4px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
  .ms-subcat-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ms-subcat-bar::-webkit-scrollbar {
    display: none !important;
  }
  .ms-products-grid-5cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ms-card-item {
    padding: 8px !important;
  }
  .cps-card-title,
  .ms-card-item .cps-card-title,
  .ms-layout3-box .cps-card-title,
  .ms-layout4-box .cps-card-title,
  .ms-layout5-box .cps-card-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 40px !important;
    margin-bottom: 6px !important;
    text-shadow: none !important;
    filter: none !important;
    color: #111827 !important;
  }
  .cps-card-title a,
  .ms-card-item .cps-card-title a,
  .ms-layout3-box .cps-card-title a,
  .ms-layout4-box .cps-card-title a,
  .ms-layout5-box .cps-card-title a {
    color: #111827 !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .ms-price-current {
    font-size: 14px !important;
  }
  .ms-layout3-banner-img {
    max-height: 110px !important;
  }
}

/* ==========================================================================
   SECTION LAYOUT 4: KHỐI THIẾT BỊ NGÀNH IN (SLIDER KÉO QUA KÉO LẠI)
   ========================================================================== */

/* Hàng 1: Category Navigation Tabs (7 Danh Mục Thiết Bị Ngành In) */
.ms-layout4-tabs-bar {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.ms-layout4-tabs-bar::-webkit-scrollbar {
  display: none !important;
}

.ms-layout4-tab-btn {
  flex: 1 1 0 !important;
  min-width: 135px !important;
  background: #ffffff !important;
  border: none !important;
  border-right: 1px solid #e5e7eb !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 12px 6px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #c41219 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: -1px !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.ms-layout4-tab-btn:first-child {
  border-left: 1px solid #e5e7eb !important;
}

.ms-layout4-tab-btn:hover {
  background: #fffafa !important;
  color: #ed1c24 !important;
}

.ms-layout4-tab-btn.active {
  background: #fff5f5 !important;
  color: #c41219 !important;
  border-bottom: 3px solid #ed1c24 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Cụm Header Danh mục con */
.ms-subcat-header-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
  gap: 12px !important;
  min-height: 34px !important;
}

.ms-subcat-header-wrap .ms-subcat-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
}

/* Lưới sản phẩm đồng bộ cho Layout 4 và Layout 5 */
.ms-l4-products-grid,
.ms-l5-products-grid {
  transition: opacity 0.2s ease !important;
}

@media (max-width: 991px) {
  .ms-layout4-tab-btn {
    min-width: 125px !important;
    font-size: 12.5px !important;
    padding: 10px 4px !important;
  }
}

@media (max-width: 767px) {
  .ms-layout4-tab-btn {
    min-width: 120px !important;
    font-size: 12px !important;
    padding: 9px 4px !important;
  }
  .ms-subcat-header-wrap {
    margin-bottom: 10px !important;
    min-height: auto !important;
  }
  .ms-subcat-header-wrap .ms-subcat-bar,
  .ms-l4-subcat-bar,
  .ms-l5-subcat-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }
  .ms-subcat-header-wrap .ms-subcat-bar::-webkit-scrollbar,
  .ms-l4-subcat-bar::-webkit-scrollbar,
  .ms-l5-subcat-bar::-webkit-scrollbar {
    display: none !important;
  }
  .ms-l4-subcat-pill,
  .ms-l5-subcat-pill {
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   SECTION LAYOUT 5: KHỐI LINH KIỆN - VẬT TƯ (ĐẦU PHUN - HỘP MỰC THẢI - RESET CHIP)
   ========================================================================== */
.ms-layout5-box {
  clear: both !important;
}
.ms-layout5-tabs-bar .ms-layout5-tab-btn {
  width: 33.333% !important;
  flex: 1 1 0 !important;
}

@media (max-width: 767px) {
  .ms-layout5-tabs-bar {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ms-layout5-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }
  .ms-layout5-tabs-bar .ms-layout5-tab-btn {
    min-width: 110px !important;
    font-size: 11.5px !important;
    padding: 9px 6px !important;
    flex: 1 0 auto !important;
    width: auto !important;
  }
}



/* ==========================================================================
   SECTION VIDEO REVIEW SẢN PHẨM (CHUẨN CELLPHONES: 4 NGANG TRÁI + 1 DỌC PHẢI)
   ========================================================================== */
#sc-video-showcase,
.ms-video-showcase-box {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e5e9f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 18px 20px 22px !important;
  box-sizing: border-box !important;
  position: relative !important;
  clear: both !important;
}

/* Header Khối Review: Tiêu Đề Đỏ Thương Hiệu + Link Xem YouTube */
.ms-review-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.ms-review-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ms-review-main-title {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.2 !important;
}

.ms-title-main-text {
  font-size: 22px !important; /* To hơn, nổi bật thương hiệu */
  font-weight: 800 !important;
  color: #d70018 !important; /* Đỏ thương hiệu Mực In Mạnh Tài */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.ms-title-sep {
  color: #cbd5e1 !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  margin: 0 4px !important;
  user-select: none !important;
}

.ms-review-yt-channel-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

.ms-review-yt-channel-link:hover {
  color: #d70018 !important;
  transform: translateX(2px) !important;
}

.ms-yt-icon {
  color: #ed1c24 !important;
  font-size: 19px !important;
  transition: transform 0.25s ease !important;
}

.ms-review-yt-channel-link:hover .ms-yt-icon {
  transform: scale(1.15) !important;
}

.ms-yt-text {
  color: inherit !important;
}

.ms-yt-arrow {
  font-size: 11px !important;
  color: #94a3b8 !important;
  transition: transform 0.2s ease !important;
}

.ms-review-yt-channel-link:hover .ms-yt-arrow {
  color: #d70018 !important;
  transform: translateX(3px) !important;
}

/* Badge Kênh chính thức góc phải */
.ms-review-header-badge {
  display: flex !important;
  align-items: center !important;
}

.ms-review-sub-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: #fff5f5 !important;
  border: 1px solid #fee2e2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-family: 'Muli', sans-serif !important;
}

.ms-review-sub-badge:hover {
  background: #fee2e2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15) !important;
}

.ms-badge-pulse {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6) !important;
  animation: msPulseDot 2s infinite !important;
}

@keyframes msPulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

/* Cụm Body Flex: Cột Trái (~65%) + Cột Phải (~35% rộng hơn, cân đối) */
.ms-review-body-flex {
  display: flex !important;
  gap: 16px !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ms-review-left-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.ms-review-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  height: 100% !important;
}

.ms-review-mobile-nav,
.ms-shorts-mobile-header,
.ms-shorts-mobile-only {
  display: none !important;
}

.ms-review-right-col {
  flex: 0 0 360px !important;
  max-width: 360px !important;
  min-width: 320px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ms-shorts-slider {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  position: relative !important;
}

.ms-shorts-slide-item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  outline: none !important;
}

.ms-shorts-slide-item.ms-shorts-mobile-only {
  display: none !important;
}

/* Khối Thẻ Video Card (Chuẩn CellphoneS) */
.ms-review-card {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.ms-review-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: #fecaca !important;
}

.ms-review-card.is-shorts-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  justify-content: space-between !important;
}

.ms-review-card.is-shorts-card .ms-review-prod-bar {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* Há»™p Player Video */
.ms-review-video-box {
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
  cursor: pointer !important;
  width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
}

.ms-review-video-box.is-landscape {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
}

.ms-review-video-box.is-portrait {
  width: 100% !important;
  position: relative !important;
}

/* Desktop Only (> 991px): Kéo căng cột Shorts cân bằng 100% với lưới 4 video ngang */
@media (min-width: 992px) {
  .ms-review-body-flex {
    align-items: stretch !important;
  }
  .ms-review-right-col {
    align-self: stretch !important;
    height: auto !important;
  }
  .ms-shorts-slider {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .ms-shorts-slide-item {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .ms-review-card.is-shorts-card {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .ms-review-video-box.is-portrait {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
}

.ms-review-poster-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.ms-review-video-box:hover .ms-review-poster-img {
  transform: scale(1.05) !important;
}

/* Lớp phủ tiêu đề phía trên video (Chuẩn CellphoneS: Logo + Tiêu đề + Tên kênh) */
.ms-review-top-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 14px 28px !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%) !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  pointer-events: none !important;
}

.ms-review-channel-badge {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.ms-review-avatar-box {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
}

.ms-review-chan-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ms-review-title-group-box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ms-review-video-title {
  font-family: 'Muli', sans-serif !important;
  font-size: 14.5px !important; /* To hơn rõ rệt so với 13px cũ */
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.ms-review-channel-name {
  font-family: 'Muli', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Riêng thẻ video dọc Shorts: tiêu đề và logo to chuẩn CellphoneS */
.ms-review-card.is-shorts-card .ms-review-video-title {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
}

.ms-review-card.is-shorts-card .ms-review-channel-name {
  font-size: 12.5px !important;
}

.ms-review-card.is-shorts-card .ms-review-avatar-box {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
}

/* Nút Play ở trung tâm Video */
.ms-review-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: none !important;
}

.ms-yt-play-svg {
  width: 46px !important;
  height: 32px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) !important;
  display: block !important;
}

.ms-shorts-icon-wrap {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 4px 12px rgba(237, 28, 36, 0.5)) !important;
}

.ms-shorts-play-svg {
  width: 50px !important;
  height: 50px !important;
  display: block !important;
}

.ms-review-video-box:hover .ms-review-play-btn {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

/* Khối Sản Phẩm Đính Kèm Ở Chân Thẻ (Chính xác theo mũi tên đỏ ảnh CellphoneS) */
.ms-review-prod-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
  min-height: 62px !important;
  box-sizing: border-box !important;
}

.ms-review-prod-bar:hover {
  background: #fffafa !important;
}

.ms-review-prod-thumb {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
}

.ms-review-prod-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ms-review-prod-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.ms-review-prod-title {
  font-family: 'Muli', sans-serif !important;
  font-size: 13.5px !important; /* To hơn 1 xíu theo đúng yêu cầu người dùng */
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 3px !important;
  transition: color 0.2s ease !important;
}

.ms-review-prod-bar:hover .ms-review-prod-title {
  color: #d70018 !important;
}

.ms-review-prod-prices {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.ms-review-price-cur {
  font-family: 'Muli', sans-serif !important;
  font-size: 14.5px !important; /* Giá đỏ sắc nét, rõ ràng */
  font-weight: 800 !important;
  color: #d70018 !important;
  line-height: 1 !important;
}

.ms-review-price-old {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  line-height: 1 !important;
}

/* Responsive Tablet (768px - 991px) */
@media (max-width: 991px) {
  .ms-review-body-flex {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .ms-review-right-col {
    flex: 0 0 100% !important;
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-self: auto !important;
    height: auto !important;
  }
  .ms-shorts-slider {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    min-height: auto !important;
  }
  .ms-shorts-slider:not(.slick-initialized) .ms-shorts-slide-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
  }
  .ms-review-card.is-shorts-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  .ms-review-card.is-shorts-card .ms-review-video-box.is-portrait {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    min-height: 400px !important;
    max-height: 520px !important;
    flex: none !important;
  }
  .ms-review-card.is-shorts-card .ms-review-prod-bar {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
}

/* Responsive Mobile (< 768px) */
@media (max-width: 767px) {
  #sc-video-showcase,
  .ms-video-showcase-box {
    padding: 10px 10px 14px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
  }
  .ms-review-header-bar {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  .ms-review-main-title {
    font-size: 17px !important;
    gap: 6px !important;
  }
  .ms-title-main-text {
    font-size: 17px !important;
  }
  .ms-review-yt-channel-link {
    font-size: 13.5px !important;
  }
  .ms-review-header-badge {
    display: none !important;
  }

  .ms-review-left-col {
    width: 100% !important;
    position: relative !important;
  }

  /* Slick Slider 1 Khung Chuẩn UX/UI Trên Mobile - Trượt Mượt Bất Cứ Lúc Nào */
  .ms-review-grid-4 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ms-review-grid-4.slick-slider {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    user-select: none !important;
    touch-action: pan-y !important;
  }
  .ms-review-grid-4 .slick-list {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }
  .ms-review-grid-4 .slick-track {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-review-grid-4 .slick-slide {
    float: left !important;
    height: 100% !important;
    min-height: 1px !important;
    outline: none !important;
    box-sizing: border-box !important;
    padding: 1px !important;
  }
  .ms-review-grid-4 .ms-review-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
    box-sizing: border-box !important;
  }
  .ms-review-video-box {
    border-radius: 14px 14px 0 0 !important;
  }
  .ms-review-avatar-box {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 2px !important;
  }
  .ms-review-video-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.35 !important;
  }
  .ms-review-channel-name {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  /* Dòng sản phẩm bên dưới video giữ nguyên to rõ, đẹp mắt */
  .ms-review-prod-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    min-height: 56px !important;
    border-radius: 0 0 14px 14px !important;
  }
  .ms-review-prod-thumb {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 2px !important;
  }
  .ms-review-prod-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    color: #1e293b !important;
  }
  .ms-review-price-cur {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #d70018 !important;
  }
  .ms-review-price-old {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
  }

  /* Dots Slick Navigation: Màu đỏ thương hiệu #d70018 */
  .ms-review-grid-4 .slick-dots {
    position: relative !important;
    bottom: auto !important;
    margin: 14px 0 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    list-style: none !important;
  }
  .ms-review-grid-4 .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .ms-review-grid-4 .slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: #cbd5e1 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .ms-review-grid-4 .slick-dots li button:before {
    display: none !important;
  }
  .ms-review-grid-4 .slick-dots li.slick-active button {
    width: 24px !important;
    background: #d70018 !important;
    box-shadow: 0 2px 6px rgba(215, 0, 24, 0.35) !important;
  }

  /* Nút Mũi Tên Trái / Phải Nổi Khối */
  .ms-slick-arrow {
    position: absolute !important;
    top: 36% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
  }
  .ms-slick-arrow:active {
    background: #d70018 !important;
    color: #ffffff !important;
    border-color: #d70018 !important;
    transform: translateY(-50%) scale(0.92) !important;
  }
  .ms-slick-prev {
    left: 8px !important;
  }
  .ms-slick-next {
    right: 8px !important;
  }

  /* HIỂN THỊ VIDEO NGẮN SHORTS DỌC TRÊN MOBILE CHUẨN TỈ LỆ 9:16 VÀ CAROUSEL TRƯỢT MƯỢT MÀ */
  .ms-shorts-mobile-only,
  .ms-shorts-slide-item.ms-shorts-mobile-only {
    display: block !important;
  }
  .ms-review-right-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px dashed #e2e8f0 !important;
    box-sizing: border-box !important;
  }
  .ms-shorts-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
  }
  .ms-shorts-tag-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.08) !important;
  }
  .ms-shorts-tag-left svg {
    width: 18px !important;
    height: 18px !important;
  }
  .ms-shorts-slider {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    position: relative !important;
    padding-bottom: 6px !important;
  }
  .ms-shorts-slider:not(.slick-initialized) .ms-shorts-slide-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    outline: none !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }
  .ms-shorts-slider.slick-initialized .slick-track,
  .ms-shorts-slider .slick-track {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-shorts-slider.slick-initialized .slick-slide,
  .ms-shorts-slider .slick-slide {
    float: left !important;
    height: 100% !important;
    min-height: 1px !important;
    outline: none !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }
  .ms-shorts-slider.slick-initialized .slick-slide > div,
  .ms-shorts-slider .slick-slide > div {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .ms-shorts-slider .ms-review-card.is-shorts-card,
  .ms-review-card.is-shorts-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    width: 100% !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }
  .ms-shorts-slider .ms-review-card.is-shorts-card .ms-review-video-box.is-portrait,
  .ms-review-card.is-shorts-card .ms-review-video-box.is-portrait {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 380px !important;
    max-height: 480px !important;
    aspect-ratio: 9 / 16 !important;
    flex: none !important;
    background: #000000 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .ms-shorts-slider .ms-review-poster-img,
  .ms-review-card.is-shorts-card .ms-review-poster-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .ms-shorts-slider .ms-review-card.is-shorts-card .ms-review-prod-bar,
  .ms-review-card.is-shorts-card .ms-review-prod-bar {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  /* Slick Dots & Arrows cho Shorts Slider */
  .ms-shorts-slider .slick-dots {
    position: relative !important;
    bottom: auto !important;
    margin-top: 14px !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .ms-shorts-slider .slick-dots li {
    margin: 0 !important;
    width: 8px !important;
    height: 8px !important;
  }
  .ms-shorts-slider .slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: #cbd5e1 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .ms-shorts-slider .slick-dots li.slick-active button {
    background: #d70018 !important;
    width: 22px !important;
    border-radius: 6px !important;
  }
  .ms-shorts-slider .ms-slick-arrow {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
  }
  .ms-shorts-slider .ms-slick-prev {
    left: 4px !important;
  }
  .ms-shorts-slider .ms-slick-next {
    right: 4px !important;
  }
}



@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ==========================================================================
   SECTION BENTO GRID CHO ĐẠI LÝ & TIỆM IN (CHUẨN THIẾT KẾ ĐỎ & XANH THƯƠNG HIỆU)
   ĐỘ RỘNG BẰNG 100% CÁC SECTION KHÁC - MÀU SẮC ĐỒNG BỘ THƯƠNG HIỆU #d70018 & #253989
   ========================================================================== */

#sc-partner-solutions.ms-bento-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
  font-family: 'Muli', 'Plus Jakarta Sans', sans-serif !important;
}

/* Subtle Glow Backdrops */
#sc-partner-solutions .ms-glow-backdrop {
  position: absolute !important;
  border-radius: 9999px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#sc-partner-solutions .ms-glow-center {
  top: 25% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  height: 320px !important;
  background: rgba(215, 0, 24, 0.06) !important;
  filter: blur(100px) !important;
}
#sc-partner-solutions .ms-glow-right {
  top: -40px !important;
  right: 0 !important;
  width: 320px !important;
  height: 320px !important;
  background: rgba(37, 57, 137, 0.05) !important;
  filter: blur(90px) !important;
}

/* Bento Grid */
#sc-partner-solutions .ms-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Shared Bento Card Styles */
#sc-partner-solutions .ms-bento-card {
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}
#sc-partner-solutions .ms-bento-card:hover {
  transform: translateY(-4px) !important;
}

/* CARD 1: HERO SPOTLIGHT (Span 8) */
#sc-partner-solutions .ms-bento-hero {
  grid-column: span 8 !important;
  background-color: #ffffff !important;
  background-image: radial-gradient(circle, rgba(215, 0, 24, 0.1) 1.2px, transparent 1.2px) !important;
  background-size: 32px 32px !important;
  border-radius: 20px !important;
  padding: 30px 32px !important;
  border: 1px solid #e5e9f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}
#sc-partner-solutions .ms-hero-glow-orb {
  position: absolute !important;
  right: -50px !important;
  top: -50px !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle, rgba(215, 0, 24, 0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#sc-partner-solutions .ms-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background: rgba(215, 0, 24, 0.07) !important;
  border: 1px solid rgba(215, 0, 24, 0.22) !important;
  color: #d70018 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}
#sc-partner-solutions .ms-badge-pulse-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #d70018 !important;
}
#sc-partner-solutions .ms-hero-title {
  position: relative !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1e2d69 !important; /* Xanh Navy thương hiệu */
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 14px 0 !important;
  padding-left: 16px !important;
  border-left: 4.5px solid #d70018 !important;
  font-family: 'Muli', 'Plus Jakarta Sans', sans-serif !important;
}
#sc-partner-solutions .ms-title-gradient-highlight {
  position: relative !important;
  display: inline-block !important;
  background: linear-gradient(135deg, #d70018 0%, #ff2a44 50%, #b80014 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}
#sc-partner-solutions .ms-hero-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
  max-width: 620px !important;
  font-weight: 500 !important;
}
#sc-partner-solutions .ms-hero-ctas {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
#sc-partner-solutions .ms-btn-bento-primary {
  padding: 11px 22px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e6001a 0%, #b80014 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(215, 0, 24, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
#sc-partner-solutions .ms-btn-bento-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(215, 0, 24, 0.45) !important;
  color: #ffffff !important;
}
#sc-partner-solutions .ms-bounce-icon {
  animation: msBounce 2s infinite !important;
}
@keyframes msBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
#sc-partner-solutions .ms-btn-bento-outline {
  padding: 10px 20px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #253989 !important;
  border: 2px solid #253989 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
#sc-partner-solutions .ms-btn-bento-outline:hover {
  background: #253989 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37, 57, 137, 0.3) !important;
}
#sc-partner-solutions .ms-btn-bento-outline i {
  color: #25d366 !important;
  font-size: 17px !important;
}
#sc-partner-solutions .ms-btn-bento-outline:hover i {
  color: #ffffff !important;
}
#sc-partner-solutions .ms-cta-note {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
#sc-partner-solutions .ms-cta-note i {
  color: #d70018 !important;
}

/* CARD 2: STAT 1 - 15+ NĂM KINH NGHIỆM (Span 4) - ĐỎ THƯƠNG HIỆU LUXURY */
#sc-partner-solutions .ms-bento-stat1 {
  grid-column: span 4 !important;
  background: linear-gradient(135deg, #b80014 0%, #d70018 60%, #990010 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 24px rgba(215, 0, 24, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}
#sc-partner-solutions .ms-stat1-glow-orb {
  position: absolute !important;
  right: -30px !important;
  bottom: -30px !important;
  width: 140px !important;
  height: 140px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  filter: blur(25px) !important;
}
#sc-partner-solutions .ms-card-top-bar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 1 !important;
}
#sc-partner-solutions .ms-stat1-icon-wrap {
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: #ffd700 !important; /* Vàng kim */
}
#sc-partner-solutions .ms-stat1-pill {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#sc-partner-solutions .ms-stat1-bottom {
  position: relative !important;
  z-index: 1 !important;
}
#sc-partner-solutions .ms-stat1-number-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  flex-wrap: wrap !important;
}
#sc-partner-solutions .ms-stat1-number {
  font-size: 42px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  font-family: 'Muli', 'Plus Jakarta Sans', sans-serif !important;
}
#sc-partner-solutions .ms-stat1-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffe066 !important; /* Vàng kim sáng */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#sc-partner-solutions .ms-stat1-desc {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.55 !important;
  margin: 8px 0 0 0 !important;
}

/* CARD 3: STAT 2 - 60K+ KHÁCH HÀNG (Span 4) - XANH NAVY THƯƠNG HIỆU */
#sc-partner-solutions .ms-bento-stat2 {
  grid-column: span 4 !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  border: 1px solid #e5e9f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#sc-partner-solutions .ms-stat2-icon-wrap {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(37, 57, 137, 0.08) !important;
  color: #253989 !important; /* Xanh Navy thương hiệu */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}
#sc-partner-solutions .ms-stat2-pill {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #253989 !important; /* Xanh Navy thương hiệu */
  background: rgba(37, 57, 137, 0.08) !important;
  border: 1px solid rgba(37, 57, 137, 0.18) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#sc-partner-solutions .ms-pill-dot-green {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #253989 !important; /* Xanh Navy thương hiệu */
}
#sc-partner-solutions .ms-stat2-number {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #253989 !important; /* Xanh Navy thương hiệu */
  line-height: 1 !important;
  margin: 14px 0 4px 0 !important;
  font-family: 'Muli', 'Plus Jakarta Sans', sans-serif !important;
}
#sc-partner-solutions .ms-stat2-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #d70018 !important; /* Đỏ thương hiệu */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}
#sc-partner-solutions .ms-stat2-desc {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* CARD 4: 4 GIÁ TRỊ CỐT LÕI (Span 8) */
#sc-partner-solutions .ms-bento-values {
  grid-column: span 8 !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 26px !important;
  border: 1px solid #e5e9f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
#sc-partner-solutions .ms-values-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
#sc-partner-solutions .ms-values-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
#sc-partner-solutions .ms-values-star-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #d70018 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
}
#sc-partner-solutions .ms-values-heading {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1e2d69 !important; /* Xanh Navy thương hiệu */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  font-family: 'Muli', 'Plus Jakarta Sans', sans-serif !important;
}
#sc-partner-solutions .ms-values-subtext {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}
#sc-partner-solutions .ms-values-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
#sc-partner-solutions .ms-val-item-card {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  transition: all 0.25s ease !important;
}
#sc-partner-solutions .ms-val-item-card.is-red-item:hover {
  background: #fff8f8 !important;
  border-color: rgba(215, 0, 24, 0.3) !important;
  transform: translateY(-2px) !important;
}
#sc-partner-solutions .ms-val-item-card.is-blue-item:hover {
  background: #f8faff !important;
  border-color: rgba(37, 57, 137, 0.3) !important;
  transform: translateY(-2px) !important;
}
#sc-partner-solutions .ms-val-item-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}
#sc-partner-solutions .ms-val-item-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}
#sc-partner-solutions .ms-val-item-card.is-red-item .ms-val-item-icon {
  background: rgba(215, 0, 24, 0.08) !important;
  color: #d70018 !important;
  border: 1px solid rgba(215, 0, 24, 0.16) !important;
}
#sc-partner-solutions .ms-val-item-card.is-blue-item .ms-val-item-icon {
  background: rgba(37, 57, 137, 0.08) !important;
  color: #253989 !important;
  border: 1px solid rgba(37, 57, 137, 0.16) !important;
}
#sc-partner-solutions .ms-val-item-card:hover .ms-val-item-icon {
  transform: scale(1.1) !important;
}
#sc-partner-solutions .ms-val-custom-thumb {
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
}
#sc-partner-solutions .ms-val-item-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
#sc-partner-solutions .ms-val-item-desc {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding-left: 44px !important;
}

/* CARD 5: TESTIMONIAL BANNER (Span 12) - ĐỎ THƯƠNG HIỆU RỰC RỠ */
#sc-partner-solutions .ms-bento-ribbon {
  grid-column: span 12 !important;
  background: linear-gradient(135deg, #b80014 0%, #d70018 60%, #990010 100%) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  padding: 16px 24px !important;
  box-shadow: 0 8px 20px rgba(184, 0, 20, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
#sc-partner-solutions .ms-ribbon-glow-orb {
  position: absolute !important;
  left: -20px !important;
  bottom: -20px !important;
  width: 140px !important;
  height: 140px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  filter: blur(25px) !important;
}
#sc-partner-solutions .ms-ribbon-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 1 !important;
  flex: 1 !important;
}
#sc-partner-solutions .ms-ribbon-quote-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
#sc-partner-solutions .ms-ribbon-quote-text {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#sc-partner-solutions .ms-ribbon-right {
  z-index: 1 !important;
  flex-shrink: 0 !important;
}
#sc-partner-solutions .ms-ribbon-seal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}

/* RESPONSIVE TABLET & MOBILE */
@media (max-width: 991px) {
  #sc-partner-solutions .ms-bento-hero {
    grid-column: span 12 !important;
    padding: 24px 20px !important;
  }
  #sc-partner-solutions .ms-bento-stat1 {
    grid-column: span 6 !important;
  }
  #sc-partner-solutions .ms-bento-stat2 {
    grid-column: span 6 !important;
  }
  #sc-partner-solutions .ms-bento-values {
    grid-column: span 12 !important;
  }
  #sc-partner-solutions .ms-hero-title {
    font-size: 26px !important;
  }
  #sc-partner-solutions .ms-bento-ribbon {
    padding: 14px 20px !important;
    gap: 16px !important;
  }
  #sc-partner-solutions .ms-ribbon-quote-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
  #sc-partner-solutions .ms-ribbon-quote-text {
    font-size: 14px !important;
  }
  #sc-partner-solutions .ms-ribbon-seal {
    padding: 5px 14px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 767px) {
  #sc-partner-solutions.ms-bento-wrapper {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  #sc-partner-solutions .ms-bento-grid {
    gap: 12px !important;
  }
  #sc-partner-solutions .ms-bento-hero {
    grid-column: span 12 !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  #sc-partner-solutions .ms-hero-title {
    font-size: 20px !important;
    padding-left: 12px !important;
    border-left: 3.5px solid #d70018 !important;
  }
  #sc-partner-solutions .ms-br-desktop {
    display: none !important;
  }
  #sc-partner-solutions .ms-hero-desc {
    font-size: 13px !important;
  }
  #sc-partner-solutions .ms-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #sc-partner-solutions .ms-btn-bento-primary,
  #sc-partner-solutions .ms-btn-bento-outline {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  #sc-partner-solutions .ms-cta-note {
    margin-left: 0 !important;
    justify-content: center !important;
  }
  #sc-partner-solutions .ms-bento-stat1 {
    grid-column: span 12 !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
  }
  #sc-partner-solutions .ms-stat1-number {
    font-size: 34px !important;
  }
  #sc-partner-solutions .ms-bento-stat2 {
    grid-column: span 12 !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
  }
  #sc-partner-solutions .ms-stat2-number {
    font-size: 30px !important;
  }
  #sc-partner-solutions .ms-bento-values {
    grid-column: span 12 !important;
    border-radius: 16px !important;
    padding: 18px 14px !important;
  }
  #sc-partner-solutions .ms-values-subtext {
    display: none !important;
  }
  #sc-partner-solutions .ms-values-mini-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #sc-partner-solutions .ms-val-item-desc {
    padding-left: 0 !important;
    margin-top: 4px !important;
  }
  /* DÒNG SLOGAN 1 DÒNG DUY NHẤT TRÊN MOBILE CHUẨN UX/UI TINH TẾ */
  #sc-partner-solutions .ms-bento-ribbon {
    grid-column: span 12 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #b80014 0%, #d70018 60%, #990010 100%) !important;
    box-shadow: 0 4px 14px rgba(184, 0, 20, 0.2) !important;
    min-height: auto !important;
    height: auto !important;
  }
  #sc-partner-solutions .ms-ribbon-glow-orb {
    width: 70px !important;
    height: 70px !important;
    filter: blur(12px) !important;
  }
  #sc-partner-solutions .ms-ribbon-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #sc-partner-solutions .ms-ribbon-quote-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
  }
  #sc-partner-solutions .ms-ribbon-quote-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: 0.1px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #sc-partner-solutions .ms-ribbon-right {
    display: none !important;
  }
}
/* Ensure FontAwesome icons always render correctly regardless of parent font */
#sc-partner-solutions i,
#sc-partner-solutions [class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
}
#sc-partner-solutions i.fa-solid,
#sc-partner-solutions i.fas {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
#sc-partner-solutions i.fa-regular,
#sc-partner-solutions i.far {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
#sc-partner-solutions i.fa-brands,
#sc-partner-solutions i.fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}
#sc-partner-solutions .ms-stat-custom-img {
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}
#sc-partner-solutions .ms-badge-custom-icon {
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

#sc-partner-solutions .ms-stat-body-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 140px !important;
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  z-index: 1 !important;
}
#sc-partner-solutions .ms-bento-stat1 .ms-stat-body-img-wrap {
  background: rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#sc-partner-solutions .ms-bento-stat2 .ms-stat-body-img-wrap {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
#sc-partner-solutions .ms-stat-body-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  transition: transform 0.35s ease !important;
}
#sc-partner-solutions .ms-bento-card:hover .ms-stat-body-img {
  transform: scale(1.05) !important;
}

/* ==========================================================================
   DRAWER CELLPHONES 100% CHUẨN GIAO DIỆN (#mobile-menu)
   ========================================================================== */
#mobile-menu.cps-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#mobile-menu.cps-drawer.show { visibility: visible !important;
  transform: translateX(0) !important;
}

/* Header */
.cps-drawer-header {
  height: 52px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}
.cps-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cps-drawer-logo-badge {
  background: #ed1c24 !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
}
.cps-drawer-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.cps-drawer-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.cps-drawer-close:active {
  background: #e2e8f0 !important;
  transform: scale(0.92) !important;
}

/* Body 2 Cá»™t */
.cps-drawer-body {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* CỘT TRÁI: Rail Tabs (95px) */
.cps-drawer-rail {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  background: #f8fafc !important;
  border-right: 1px solid #eef2f6 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 85px !important;
}
.cps-drawer-rail::-webkit-scrollbar { display: none !important; }

.cps-rail-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 4px !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.cps-rail-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  margin-bottom: 5px !important;
  transition: transform 0.2s !important;
}
.cps-rail-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-width: 85px !important;
}

/* Pastel backgrounds for icons */
.bg-pastel-red { background: #fee2e2 !important; color: #ef4444 !important; }
.bg-pastel-blue { background: #e0f2fe !important; color: #0284c7 !important; }
.bg-pastel-amber { background: #fef3c7 !important; color: #d97706 !important; }
.bg-pastel-purple { background: #f3e8ff !important; color: #9333ea !important; }
.bg-pastel-orange { background: #ffedd5 !important; color: #ea580c !important; }
.bg-pastel-indigo { background: #e0e7ff !important; color: #4f46e5 !important; }
.bg-pastel-emerald { background: #d1fae5 !important; color: #059669 !important; }
.bg-pastel-rose { background: #ffe4e6 !important; color: #e11d48 !important; }
.bg-pastel-cyan { background: #cffafe !important; color: #0891b2 !important; }
.bg-pastel-teal { background: #ccfbf1 !important; color: #0d9488 !important; }
.bg-pastel-slate { background: #f1f5f9 !important; color: #475569 !important; }

/* Trạng thái Tab Active */
.cps-rail-item.active {
  background: #ffffff !important;
}
.cps-rail-item.active .cps-rail-text {
  color: #ed1c24 !important;
  font-weight: 700 !important;
}
.cps-rail-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10% !important;
  bottom: 10% !important;
  width: 3.5px !important;
  background: #ed1c24 !important;
  border-radius: 0 4px 4px 0 !important;
}
.cps-rail-item.active .cps-rail-icon-wrap {
  transform: scale(1.08) !important;
}

/* CỘT PHẢI: Content Panels */
.cps-drawer-content {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 14px 14px 85px 14px !important;
  background: #ffffff !important;
}
.cps-drawer-content::-webkit-scrollbar { width: 3px !important; }
.cps-drawer-content::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 3px !important; }

.cps-panel {
  display: none !important;
}
.cps-panel.active {
  display: block !important;
  animation: cpsFadeIn 0.18s ease-out !important;
}
@keyframes cpsFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel Header */
.cps-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.cps-panel-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.cps-panel-viewall {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* Section Title */
.cps-section-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 14px 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.cps-section-title:first-of-type {
  margin-top: 0 !important;
}

/* LÆ°á»›i Chip Buttons */
.cps-chips-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.cps-chips-grid.grid-2col {
  grid-template-columns: repeat(2, 1fr) !important;
}

.cps-chip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
  min-height: 40px !important;
  line-height: 1.25 !important;
}
.cps-chip:active {
  background: #fee2e2 !important;
  border-color: #ed1c24 !important;
  color: #ed1c24 !important;
  transform: scale(0.97) !important;
}

/* Tag Badge HOT / MỚI */
.cps-tag-badge {
  position: absolute !important;
  top: -6px !important;
  right: 2px !important;
  background: #ed1c24 !important;
  color: #ffffff !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 4px rgba(237, 28, 36, 0.3) !important;
}

/* Reset and ensure perfect button behavior for cps-rail-item */
button.cps-rail-item {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
button.cps-rail-item.active {
  background: #ffffff !important;
}

/* ========================================================
   SECTION ĐỐI TÁC & THƯƠNG HIỆU PHÂN PHỐI CHÍNH HÃNG
   FULL BẰNG CÁC SECTION KHÁC - CHẠY QUA CHẠY LẠI MƯỢT MÀ
   ======================================================== */
#sc-brand-partners.ms-brand-partners-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

#sc-brand-partners .ms-bp-container {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 26px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

#sc-brand-partners .ms-bp-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
}

#sc-brand-partners .ms-bp-header-left {
  flex: 1 1 auto !important;
  max-width: 750px !important;
}

#sc-brand-partners .ms-bp-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #ed1c24 0%, #d70018 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(237, 28, 36, 0.22) !important;
  margin-bottom: 8px !important;
}

#sc-brand-partners .ms-bp-badge i {
  color: #ffe082 !important;
  font-size: 11px !important;
}

#sc-brand-partners .ms-bp-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #1e293b !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
}

#sc-brand-partners .ms-bp-desc {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  max-width: 750px !important;
}

#sc-brand-partners .ms-bp-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

#sc-brand-partners .ms-bp-trust-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#sc-brand-partners .ms-bp-trust-blue {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

#sc-brand-partners .ms-bp-trust-blue i {
  color: #2563eb !important;
}

#sc-brand-partners .ms-bp-trust-red {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
}

#sc-brand-partners .ms-bp-trust-red i {
  color: #dc2626 !important;
}

/* Slider Track & Cards: Auto Marquee Chạy Qua Chạy Lại */
#sc-brand-partners .ms-bp-slider-wrap {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
}

#sc-brand-partners .ms-bp-slider-wrap::before,
#sc-brand-partners .ms-bp-slider-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 24px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#sc-brand-partners .ms-bp-slider-wrap::before {
  left: 0 !important;
  background: linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0) 100%) !important;
}

#sc-brand-partners .ms-bp-slider-wrap::after {
  right: 0 !important;
  background: linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0) 100%) !important;
}

@keyframes msBpMarqueeRunMobile {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(calc(-50% - 5px), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes msBpMarqueeRun {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-50% - 8px));
  }
  100% {
    transform: translateX(0);
  }
}

#sc-brand-partners .ms-partners-track {
  display: flex !important;
  gap: 16px !important;
  width: max-content !important;
  animation: msBpMarqueeRun 20s ease-in-out infinite alternate !important;
  will-change: transform !important;
}

#sc-brand-partners .ms-partners-track:hover {
  animation-play-state: paused !important;
}

#sc-brand-partners .ms-bp-card-col {
  flex: 0 0 230px !important;
  width: 230px !important;
  box-sizing: border-box !important;
}

#sc-brand-partners .ms-bp-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  height: 95px !important;
  width: 100% !important;
  padding: 12px 20px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#sc-brand-partners .ms-bp-card:hover {
  transform: translateY(-4px) !important;
  border-color: #ed1c24 !important;
  box-shadow: 0 12px 25px -4px rgba(237, 28, 36, 0.15), 0 0 0 1px #ed1c24 !important;
}

#sc-brand-partners .ms-bp-logo-img {
  max-width: 100% !important;
  max-height: 48px !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

#sc-brand-partners .ms-bp-card:hover .ms-bp-logo-img {
  transform: scale(1.06) !important;
}

/* Text / Vector Logo Fallbacks */
#sc-brand-partners .ms-bp-text-logo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1 !important;
  transition: transform 0.25s ease !important;
}

#sc-brand-partners .ms-bp-card:hover .ms-bp-text-logo,
#sc-brand-partners .ms-bp-card:hover .ms-bp-hp-badge {
  transform: scale(1.06) !important;
}

#sc-brand-partners .ms-logo-epson {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #003399 !important;
  letter-spacing: -0.5px !important;
}

#sc-brand-partners .ms-logo-canon {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: #cc0000 !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  letter-spacing: 0.5px !important;
}

#sc-brand-partners .ms-bp-hp-badge {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #0096d6 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.25s ease !important;
}

#sc-brand-partners .ms-logo-brother {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #004b93 !important;
  text-transform: lowercase !important;
  letter-spacing: -0.5px !important;
}

#sc-brand-partners .ms-logo-pantum {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #e60012 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* ========================================================
   RESPONSIVE CHO MOBILE (<= 768px): 1 HÀNG 2 CỘT
   ======================================================== */
@media (max-width: 768px) {
  #sc-brand-partners.ms-brand-partners-section {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  #sc-brand-partners .ms-bp-container {
    padding: 12px 10px 14px 10px !important;
    border-radius: 14px !important;
  }
  #sc-brand-partners .ms-bp-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  #sc-brand-partners .ms-bp-header-left {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #sc-brand-partners .ms-bp-badge {
    font-size: 10.5px !important;
    padding: 3px 10px !important;
    margin-bottom: 6px !important;
  }
  #sc-brand-partners .ms-bp-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
  }
  #sc-brand-partners .ms-bp-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  #sc-brand-partners .ms-bp-header-right {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  #sc-brand-partners .ms-bp-trust-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
  }

    /* Hien thi cac the nhan ban de dai logo chay muot ma khong ngat quang */
  #sc-brand-partners .ms-bp-card-desktop-only {
    display: block !important;
  }

  /* 1 DONG DUY NHAT CHAY QUA CHAY LAI TREN MOBILE CHUAN UX/UI */
  #sc-brand-partners .ms-partners-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: max-content !important;
    animation: msBpMarqueeRunMobile 16s ease-in-out infinite alternate !important;
    will-change: transform !important;
    margin: 0 !important;
  }

  #sc-brand-partners .ms-partners-track:hover,
  #sc-brand-partners .ms-partners-track:active,
  #sc-brand-partners .ms-partners-track.is-paused {
    animation-play-state: paused !important;
  }

  #sc-brand-partners .ms-bp-card-col {
    flex: 0 0 135px !important;
    width: 135px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  #sc-brand-partners .ms-bp-card {
    height: 64px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #sc-brand-partners .ms-bp-card:hover,
  #sc-brand-partners .ms-bp-card:active {
    border-color: #253989 !important;
    transform: scale(0.97) !important;
    box-shadow: 0 4px 12px rgba(37, 57, 137, 0.15) !important;
  }

  #sc-brand-partners .ms-bp-logo-img {
    max-height: 36px !important;
    max-width: 95px !important;
    object-fit: contain !important;
  }

  #sc-brand-partners .ms-logo-epson { font-size: 20px !important; }
  #sc-brand-partners .ms-logo-canon { font-size: 22px !important; }
  #sc-brand-partners .ms-bp-hp-badge { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  #sc-brand-partners .ms-logo-brother { font-size: 18px !important; }
  #sc-brand-partners .ms-logo-pantum { font-size: 16px !important; }
}

/* ========================================================
   SECTION: TIN TỨC VÀ SỰ KIỆN (#sc-news-events)
   Desktop: Tầng 1 Tĩnh 2 bài (50%-50%) + Tầng 2 Slider 3 cột trượt qua lại
   Mobile: Chuẩn CellphoneS 1 hàng duy nhất (2 cột) vuốt ngang
   ======================================================== */
#sc-news-events.ms-news-events-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

#sc-news-events .ms-ne-container {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 26px 28px 26px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Header */
#sc-news-events .ms-ne-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
}

#sc-news-events .ms-ne-header-left {
  flex: 1 1 auto !important;
  max-width: 750px !important;
}

#sc-news-events .ms-ne-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fef2f2 !important;
  color: #ed1c24 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}

#sc-news-events .ms-ne-badge i {
  color: #ed1c24 !important;
  font-size: 11px !important;
}

#sc-news-events .ms-ne-title {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  text-transform: uppercase !important;
}

#sc-news-events .ms-ne-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

#sc-news-events .ms-ne-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #253989 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

#sc-news-events .ms-ne-view-all-btn:hover {
  background: #ed1c24 !important;
  border-color: #ed1c24 !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

#sc-news-events .ms-ne-view-all-btn i {
  font-size: 11px !important;
  transition: transform 0.2s ease !important;
}

#sc-news-events .ms-ne-view-all-btn:hover i {
  transform: translateX(3px) !important;
}

#sc-news-events .ms-mobile-text,
#sc-news-events .ms-mobile-icon {
  display: none !important;
}
#sc-news-events .ms-desktop-text,
#sc-news-events .ms-desktop-icon {
  display: inline !important;
}

/* ========================================================
   DESKTOP BỐ CỤC: TẦNG 1 TĨNH (50%-50%) + TẦNG 2 SLIDER 3 CỘT
   ======================================================== */
.ms-hybrid-desktop {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
}

/* TẦNG 1: 2 BÀI TIÊU ĐIỂM (50% - 50%) */
.ms-tier1-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

/* THẺ OVERLAY CARD */
.ms-card-overlay {
  position: relative !important;
  display: block !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  background: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.ms-card-overlay:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

.ms-card-tier1 {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

.ms-card-tier2 {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

.ms-card-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ms-card-overlay:hover .ms-card-img {
  transform: scale(1.05) !important;
}

.ms-gradient-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: background 0.3s ease !important;
}

.ms-card-overlay:hover .ms-gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.55) 68%,
    rgba(0, 0, 0, 0.95) 100%
  ) !important;
}

.ms-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 14px 18px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
}

.ms-card-tier1 .ms-card-content {
  padding: 16px 20px !important;
}

.ms-badge-tag {
  display: inline-block !important;
  align-self: flex-start !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ms-badge-tag.hot {
  background: rgba(237, 28, 36, 0.88) !important;
  border-color: rgba(237, 28, 36, 0.4) !important;
}

#sc-news-events .ms-card-title,
.ms-ne-container .ms-card-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: color 0.25s ease !important;
}

.ms-card-tier1 .ms-card-title {
  font-size: 17.5px !important;
  line-height: 1.4 !important;
}

.ms-card-tier2 .ms-card-title {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}

.ms-card-overlay:hover .ms-card-title {
  color: #ffe082 !important;
}

.ms-card-meta {
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.ms-card-no-img,
.ms-cps-no-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1e293b !important;
  color: #64748b !important;
  font-size: 32px !important;
}

.ms-cps-no-img {
  position: static !important;
  background: #f1f5f9 !important;
  font-size: 20px !important;
}

/* ========================================================
   TẦNG 2: SLIDER 3 CỘT TRƯỢT QUA LẠI
   ======================================================== */
.ms-tier2-slider-wrap {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ms-tier2-slider-track .slick-list {
  margin: 0 -8px !important;
  overflow: hidden !important;
}

.ms-tier2-slider-track .slick-slide {
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

.ms-tier2-slider-track .slick-slide > div {
  width: 100% !important;
}

.ms-slider-item {
  outline: none !important;
}

/* Fallback hiển thị 3 cột mượt mà trước khi Slick load */
.ms-tier2-slider-track:not(.slick-initialized) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
}

.ms-tier2-slider-track:not(.slick-initialized) > .ms-slider-item:nth-child(n+4) {
  display: none !important;
}

/* Nút Mũi Tên Trượt Slider (< và >) */
.ms-slider-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  font-size: 14px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  outline: none !important;
  line-height: 1 !important;
}

.ms-slider-arrow:hover {
  background: #ed1c24 !important;
  color: #ffffff !important;
  border-color: #ed1c24 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.ms-slider-prev {
  left: -16px !important;
}

.ms-slider-next {
  right: -16px !important;
}

/* ========================================================
   MOBILE BỐ CỤC: 1 HÀNG 2 CỘT CHUẨN CELLPHONES
   ======================================================== */
.ms-hybrid-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  #sc-news-events.ms-news-events-section {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #sc-news-events .ms-ne-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 14px 10px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #sc-news-events .ms-ne-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #sc-news-events .ms-ne-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #sc-news-events .ms-ne-badge {
    display: none !important;
  }

  #sc-news-events .ms-ne-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #sc-news-events .ms-ne-title::before {
    content: "\f0e7" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #ed1c24 !important;
    font-size: 12px !important;
  }

  #sc-news-events .ms-ne-desc {
    display: none !important;
  }

  #sc-news-events .ms-ne-header-right {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  #sc-news-events .ms-ne-view-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    border-radius: 20px !important;
    padding: 3px 9px !important;
    margin: 0 !important;
    color: #ed1c24 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #sc-news-events .ms-mobile-text,
  #sc-news-events .ms-mobile-icon {
    display: inline !important;
  }

  #sc-news-events .ms-desktop-text,
  #sc-news-events .ms-desktop-icon {
    display: none !important;
  }

  #sc-news-events .ms-ne-view-all-btn i {
    font-size: 9px !important;
    transform: none !important;
  }

  /* Ẩn Desktop, hiện Mobile */
  .ms-hybrid-desktop {
    display: none !important;
  }

  .ms-hybrid-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Phương Án 1: THẺ CARD LỚN 82% (TO RÕ, ẢNH 16:9, VUỐT NGANG MƯỢT MÀ) */
  .ms-cps-scroll-track {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 2px 2px 8px 2px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
  }

  .ms-cps-scroll-track::-webkit-scrollbar {
    display: none !important;
  }

  .ms-cps-card {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .ms-cps-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    position: relative !important;
  }

  .ms-cps-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .ms-cps-body {
    padding: 10px 12px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .ms-cps-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.38 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .ms-cps-date {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}


/* =======================================================
   BỔ SUNG CSS: DỊCH VỤ, BLOG VÀ ICON ĐĂNG NHẬP HÀNG 1 (CHUẨN 2026)
   ======================================================= */
.site-header-modern .main-header-row .container {
  gap: 8px !important;
}

.site-header-modern .td-search-wrap {
  margin: 0 4px !important;
  min-width: 180px !important;
  flex: 1 1 auto !important;
}

.site-header-modern .td-actions-wrap {
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.site-header-modern .td-service-wrapper,
.site-header-modern .td-blog-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-header-modern .td-service-btn,
.site-header-modern .td-blog-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 9px 0 4px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  gap: 2px !important;
}

.site-header-modern .td-service-btn:hover,
.site-header-modern .td-blog-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-1px);
}

.site-header-modern .td-service-icon,
.site-header-modern .td-blog-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #253989 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  margin-right: 5px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.site-header-modern .td-service-btn:hover .td-service-icon,
.site-header-modern .td-blog-btn:hover .td-blog-icon {
  transform: scale(1.08) !important;
  color: #ed1c24 !important;
}

.site-header-modern .td-service-btn .td-action-title,
.site-header-modern .td-blog-btn .td-action-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}

.site-header-modern .td-mini-chevron {
  font-size: 7.5px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-left: 3px !important;
  transition: transform 0.25s ease !important;
}

.site-header-modern .td-service-wrapper:hover .td-mini-chevron,
.site-header-modern .td-blog-wrapper:hover .td-mini-chevron {
  transform: rotate(180deg) !important;
}

/* Dropdown xổ xuống cho Dịch vụ & Blog */
.site-header-modern .td-nav-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  min-width: 200px !important;
  padding: 6px 0 !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

.site-header-modern .td-service-wrapper:hover .td-nav-dropdown,
.site-header-modern .td-blog-wrapper:hover .td-nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.site-header-modern .td-nav-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important;
  display: block !important;
}

.site-header-modern .td-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.site-header-modern .td-dropdown-item i {
  width: 18px !important;
  font-size: 12.5px !important;
  color: #253989 !important;
  text-align: center !important;
  transition: color 0.18s ease !important;
}

.site-header-modern .td-dropdown-item:hover {
  background: #fef2f2 !important;
  color: #ed1c24 !important;
  padding-left: 17px !important;
}

.site-header-modern .td-dropdown-item:hover i {
  color: #ed1c24 !important;
}

/* Nút Tài khoản dạng ICON ONLY */
.site-header-modern .td-user-icon-only {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
  text-decoration: none !important;
}

.site-header-modern .td-user-icon-only:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-1px);
}

.site-header-modern .td-user-icon-only .td-action-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #253989 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  margin-right: 0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.site-header-modern .td-user-icon-only:hover .td-action-icon {
  transform: scale(1.08) !important;
  color: #ed1c24 !important;
}

/* Nút Giỏ hàng tinh gọn */
.site-header-modern .td-cart-btn {
  height: 38px !important;
  padding: 0 11px 0 4px !important;
}

.site-header-modern .td-cart-btn .td-action-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 12.5px !important;
  margin-right: 6px !important;
}

.site-header-modern .td-cart-btn .td-action-title {
  font-size: 12px !important;
}

/* Nút Hotline tinh gọn */
.site-header-modern .td-hotline-btn,
.site-header-modern .td-hotline-box {
  height: 38px !important;
  padding: 0 10px 0 5px !important;
}

.site-header-modern .td-hotline-btn .td-action-icon,
.site-header-modern .td-hotline-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  margin-right: 6px !important;
}

.site-header-modern .td-hotline-num {
  font-size: 12px !important;
}

.site-header-modern .td-hotline-sub {
  font-size: 11.5px !important;
}

/* Sticky Header thu nhỏ nhẹ */
.site-header-modern.is-sticky .td-service-btn,
.site-header-modern.is-sticky .td-blog-btn {
  height: 34px !important;
  padding: 0 8px 0 4px !important;
}
.site-header-modern.is-sticky .td-service-icon,
.site-header-modern.is-sticky .td-blog-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  margin-right: 4px !important;
}
.site-header-modern.is-sticky .td-user-icon-only {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
}
.site-header-modern.is-sticky .td-user-icon-only .td-action-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}

/* Màn hình laptop 1200px - 1380px: Tự động điều chỉnh khít viền */
@media (max-width: 1380px) {
  .site-header-modern .main-header-row .container {
    gap: 6px !important;
  }
  .site-header-modern .td-actions-wrap {
    gap: 5px !important;
  }
  .site-header-modern .td-hotline-btn,
  .site-header-modern .td-hotline-box {
    padding: 0 8px 0 4px !important;
  }
  .site-header-modern .td-cart-btn {
    padding: 0 9px 0 4px !important;
  }
  .site-header-modern .td-service-btn,
  .site-header-modern .td-blog-btn {
    padding: 0 7px 0 3px !important;
  }
  .site-header-modern .td-service-btn .td-action-title,
  .site-header-modern .td-blog-btn .td-action-title {
    font-size: 11.5px !important;
  }
}

@media (max-width: 1220px) {
  .site-header-modern .td-cart-meta .td-cart-sub-text {
    display: none !important;
  }
  .site-header-modern .td-mini-chevron {
    display: none !important;
  }
}

/* Ẩn hoàn toàn trên Mobile/Tablet <= 991px */
@media (max-width: 991px) {
  .site-header-modern .desktop-action-only,
  .site-header-modern .td-service-wrapper,
  .site-header-modern .td-service-btn,
  .site-header-modern .td-blog-wrapper,
  .site-header-modern .td-blog-btn,
  .site-header-modern .td-user-icon-only {
    display: none !important;
  }
}

/* Nút Tài khoản dạng ICON TRÒN HOÀN HẢO KHÔNG LỆCH */
.site-header-modern a.td-user-circle-btn,
.site-header-modern .td-user-circle-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--hdr-brand-navy, #253989) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.site-header-modern a.td-user-circle-btn:hover {
  background: #ffffff !important;
  color: var(--hdr-brand-red, #ed1c24) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px) scale(1.06) !important;
}
.site-header-modern a.td-user-circle-btn i {
  font-size: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}
.site-header-modern.is-sticky .td-user-circle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
}
.site-header-modern.is-sticky .td-user-circle-btn i {
  font-size: 13.5px !important;
}
@media (max-width: 991px) {
  .site-header-modern .td-user-circle-btn {
    display: none !important;
  }
}


/* ==========================================================================
   TỐI ƯU TOÀN DIỆN HEADER 3 NỀN TẢNG (DESKTOP, TABLET, MOBILE) - CHUẨN 2026
   ========================================================================== */

/* --- 1. KHẮC PHỤC TRIỆT ĐỂ LỖI LOGO RỚT DÒNG (ALL DEVICES) --- */
.site-header-modern .td-logo-wrap {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.site-header-modern .td-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.site-header-modern .td-logo-text {
  display: flex !important;
  flex-direction: column !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.site-header-modern .td-logo-title,
.site-header-modern .td-logo-title strong {
  white-space: nowrap !important;
  display: inline-block !important;
  word-break: keep-all !important;
}

/* --- 2. TABLET & LAPTOP NHỎ (769px - 1199px) --- */
@media (min-width: 769px) and (max-width: 1199px) {
  .site-header-modern .main-header-row .container,
  .site-header-modern.is-sticky .main-header-row .container {
    gap: 6px !important;
    padding: 0 10px !important;
  }
  .site-header-modern .td-logo-link {
    padding: 3px 8px !important;
    gap: 6px !important;
  }
  .site-header-modern .td-logo-img {
    height: 28px !important;
    max-height: 28px !important;
  }
  .site-header-modern .td-logo-title,
  .site-header-modern .td-logo-title strong {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .site-header-modern .td-logo-slogan {
    display: none !important;
  }
  .site-header-modern .td-header-cat-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }
  .site-header-modern .td-header-cat-btn span {
    font-size: 12px !important;
  }
  .site-header-modern .td-search-wrap {
    min-width: 130px !important;
    flex: 1 !important;
    margin: 0 4px !important;
  }
  .site-header-modern .td-actions-wrap {
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-hotline-btn,
  .site-header-modern .td-hotline-box {
    padding: 0 8px 0 4px !important;
  }
  .site-header-modern .td-cart-btn {
    padding: 0 8px 0 4px !important;
  }
  .site-header-modern .td-cart-text,
  .site-header-modern .td-cart-meta .td-cart-sub-text {
    display: none !important;
  }
  .site-header-modern .td-service-btn,
  .site-header-modern .td-blog-btn {
    padding: 0 7px 0 3px !important;
  }
  .site-header-modern .td-service-btn .td-action-title,
  .site-header-modern .td-blog-btn .td-action-title {
    font-size: 11px !important;
  }
  .site-header-modern .td-user-circle-btn,
  .site-header-modern a.td-user-circle-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* --- 3. MOBILE CHUẨN CHỈNH & KHẮC PHỤC LỆCH ICON (<= 768px) --- */
@media (max-width: 768px) {
  /* Khung Container tràn đầy 100%, dàn đều 2 đầu */
  .site-header-modern .main-header-row .container,
  .site-header-modern.is-sticky .main-header-row .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  /* Ẩn các phần tử Desktop */
  .site-header-modern .desktop-action-only,
  .site-header-modern .desktop-cat-only,
  .site-header-modern .desktop-search-only,
  .site-header-modern .td-service-wrapper,
  .site-header-modern .td-service-btn,
  .site-header-modern .td-blog-wrapper,
  .site-header-modern .td-blog-btn,
  .site-header-modern .td-logo-slogan,
  .site-header-modern .td-hotline-meta,
  .site-header-modern .td-cart-meta,
  .site-header-modern .td-cart-text {
    display: none !important;
  }

  /* Nút Hamburger */
  .site-header-modern .mobile-hamburger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* Logo Mobile: Nằm gọn gàng trên 1 dòng duy nhất, không rớt dòng */
  .site-header-modern .td-logo-wrap {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .site-header-modern .td-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-logo-img {
    height: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-logo-title,
  .site-header-modern .td-logo-title strong {
    font-size: 12.5px !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    color: var(--hdr-brand-red, #ed1c24) !important;
    line-height: 1.2 !important;
    display: inline-block !important;
  }

  /* CỤM TIỆN ÍCH MOBILE: Ghim chặt sát lề phải màn hình, triệt tiêu khoảng lệch */
  .site-header-modern .td-actions-wrap,
  .site-header-modern.is-sticky .td-actions-wrap {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Hotline Mobile: Nút tròn 34px trắng viền đỏ rung lắc chuẩn UX */
  .site-header-modern .td-hotline-mobile-text {
    display: none !important;
  }
  .site-header-modern .td-hotline-wrapper {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-action-btn.td-hotline-btn,
  .site-header-modern .td-hotline-box {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid var(--hdr-brand-red, #ed1c24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }
  .site-header-modern .td-action-btn.td-hotline-btn .td-action-icon,
  .site-header-modern .td-hotline-box .td-hotline-icon {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    color: var(--hdr-brand-red, #ed1c24) !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header-modern .td-action-btn.td-hotline-btn .td-action-icon i {
    animation: td-phone-ring 2.5s infinite ease-in-out !important;
  }

  /* Giỏ hàng Mobile: Nút tròn đỏ 34px kèm badge vàng */
  .site-header-modern .td-cart-box,
  .site-header-modern .td-cart-wrap {
    position: relative !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-cart-box > a,
  .site-header-modern .td-cart-wrap > a,
  .site-header-modern a.cart-contents,
  .site-header-modern .td-action-btn.td-cart-btn,
  .site-header-modern .td-cart-link {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ed1c24 0%, #c41219 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }
  .site-header-modern a.cart-contents .td-action-icon {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header-modern a.cart-contents .cart-count,
  .site-header-modern .td-cart-box .cart-count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    left: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    background: #ffeb3b !important;
    color: #000000 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    border: 1px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
  }

  /* Nút Đăng nhập Mobile: Nút tròn trắng 34px hoàn hảo */
  .site-header-modern .td-user-circle-btn,
  .site-header-modern a.td-user-circle-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: var(--hdr-brand-navy, #253989) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    flex-shrink: 0 !important;
  }
  .site-header-modern .td-user-circle-btn i,
  .site-header-modern a.td-user-circle-btn i {
    font-size: 13.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--hdr-brand-navy, #253989) !important;
  }
}

/* --- 4. STICKY HEADER MOBILE (KHI CUỘN TRANG TRÊN ĐIỆN THOẠI) --- */
@media (max-width: 768px) {
  .site-header-modern.is-sticky .main-header-row {
    padding: 5px 0 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22) !important;
  }
  .site-header-modern.is-sticky .mobile-hamburger-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 15px !important;
  }
  .site-header-modern.is-sticky .td-logo-img {
    height: 24px !important;
    max-height: 24px !important;
  }
  .site-header-modern.is-sticky .td-logo-title,
  .site-header-modern.is-sticky .td-logo-title strong {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .site-header-modern.is-sticky .td-actions-wrap {
    gap: 5px !important;
  }
  .site-header-modern.is-sticky .td-action-btn.td-hotline-btn,
  .site-header-modern.is-sticky .td-hotline-box {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
  .site-header-modern.is-sticky .td-action-btn.td-hotline-btn .td-action-icon {
    font-size: 12px !important;
  }
  .site-header-modern.is-sticky .td-cart-box > a,
  .site-header-modern.is-sticky a.cart-contents,
  .site-header-modern.is-sticky .td-action-btn.td-cart-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
  .site-header-modern.is-sticky a.cart-contents .td-action-icon {
    font-size: 12px !important;
  }
  .site-header-modern.is-sticky .td-user-circle-btn,
  .site-header-modern.is-sticky a.td-user-circle-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
  .site-header-modern.is-sticky .td-user-circle-btn i,
  .site-header-modern.is-sticky a.td-user-circle-btn i {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   TỐI ƯU HÓA TOÀN DIỆN KHOẢNG TRỐNG CÁC SECTION TRANG CHỦ (CHUẨN UX/UI ĐA THIẾT BỊ)
   - Xóa bỏ triệt để khoảng trống thừa, đệm trắng giữa các section
   - Desktop (> 1024px): Khoảng cách chuẩn đồng bộ 20px - 22px
   - Tablet (768px - 1024px): Khoảng cách chuẩn đồng bộ 16px
   - Mobile (<= 767px): Khoảng cách chuẩn đồng bộ 12px khít đẹp, liền mạch
   - Kết nối mượt mà giữa Section Tin tức và Thanh cam kết vàng (Footer)
   ========================================================================== */

/* 1. Reset wrapper container trang chủ để chống cộng dồn padding */
.home .page-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.home #product-cat-selected,
.home #product-cat-selected.page-section {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 2. Chuẩn hóa Desktop (> 1024px): Khoảng cách 22px khít, sang trọng */
@media (min-width: 1025px) {
  #sc-1.page-section {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }
  .after-banner,
  .nk-cat-wrapper {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
  .cps-outer-box {
    margin-top: 14px !important;
    margin-bottom: 22px !important;
  }
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box,
  #sc-video-showcase,
  .ms-video-showcase-box,
  #sc-partner-solutions.ms-bento-wrapper,
  #sc-brand-partners.ms-brand-partners-section,
  #sc-news-events.ms-news-events-section {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    clear: both !important;
  }
}

/* 3. Chuẩn hóa Tablet (768px - 1024px): Khoảng cách 16px */
@media (min-width: 768px) and (max-width: 1024px) {
  #sc-1.page-section {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }
  .after-banner,
  .nk-cat-wrapper {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
  .cps-outer-box {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    padding: 14px 14px 18px !important;
  }
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box,
  #sc-video-showcase,
  .ms-video-showcase-box,
  #sc-partner-solutions.ms-bento-wrapper,
  #sc-brand-partners.ms-brand-partners-section,
  #sc-news-events.ms-news-events-section {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    clear: both !important;
  }
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box {
    padding: 14px 14px 18px !important;
  }
  #sc-video-showcase,
  .ms-video-showcase-box {
    padding: 14px 14px 18px !important;
  }
  #sc-brand-partners .ms-bp-container {
    padding: 16px 14px 18px !important;
  }
  #sc-news-events .ms-ne-container {
    padding: 16px 14px 18px !important;
  }
}

/* 4. Chuẩn hóa Mobile (<= 767px): Khoảng cách 12px liền khối, chuẩn CellphoneS */
@media (max-width: 767px) {
  #sc-1.page-section {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }
  .after-banner,
  .nk-cat-wrapper {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
  .cps-outer-box {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
  }
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box,
  #sc-video-showcase,
  .ms-video-showcase-box,
  #sc-partner-solutions.ms-bento-wrapper,
  #sc-brand-partners.ms-brand-partners-section,
  #sc-news-events.ms-news-events-section {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    clear: both !important;
  }
  .ms-layout3-box,
  .ms-layout4-box,
  .ms-layout5-box {
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
  }
  #sc-video-showcase,
  .ms-video-showcase-box {
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
  }
  #sc-brand-partners .ms-bp-container {
    padding: 12px 10px 14px 10px !important;
    border-radius: 14px !important;
  }
  #sc-news-events .ms-ne-container {
    padding: 12px 10px 14px 10px !important;
    border-radius: 14px !important;
  }

  /* Tinh gọn khoảng cách các header/tabs bên trong section */
  .cps-section-banner-wrap {
    margin-bottom: 8px !important;
  }
  .cps-top-tabs-bar.cps-tabs-50-50 {
    margin-bottom: 8px !important;
  }
  .ms-layout3-tabs-bar,
  .ms-layout4-tabs-bar,
  .ms-layout5-tabs-bar {
    margin-bottom: 8px !important;
  }
  .ms-subcat-header-wrap {
    margin-bottom: 8px !important;
  }
  .ms-layout3-banner-wrap {
    margin-bottom: 8px !important;
  }
  .ms-review-header-bar {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  #sc-brand-partners .ms-bp-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  #sc-news-events .ms-ne-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* ==========================================================================
   NÂNG CẤP THANH TÌM KIẾM FIBOSEARCH CHUẨN UX/UI HIỆN ĐẠI (PHƯƠNG ÁN A)
   - Triệt tiêu 100% màn hình trắng xóa trên điện thoại
   - Dropdown nổi mượt mà (Floating Dropdown) chuẩn Shopee / Tiki / Nguyễn Kim
   - Thanh từ khóa gợi ý xu hướng Hot Trend 1-chạm tiện lợi
   - Màu sắc nhận diện chuẩn thương hiệu: Xanh Navy #253989 & Đỏ tươi #ed1c24
   ========================================================================== */

/* 1. THANH TỪ KHÓA HOT TREND GỢI Ý NHANH (MOBILE SEARCH ROW) */
.ms-search-trend-tags {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ms-trend-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #fed7aa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.ms-trend-label i {
  color: #ffedd5 !important;
  font-size: 11px !important;
}

.ms-trend-tags-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 2px !important;
  width: 100% !important;
}

.ms-trend-tags-scroll::-webkit-scrollbar {
  display: none !important;
}

.ms-trend-pill {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.18s ease !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

.ms-trend-pill:hover,
.ms-trend-pill:active {
  background: #ffffff !important;
  color: #253989 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* 2. KHUNG DROPDOWN GỢI Ý NỔI (FLOATING SUGGESTIONS WRAPPER) */
.dgwt-wcas-suggestions-wrapp {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  z-index: 999999 !important;
  margin-top: 6px !important;
  font-family: inherit !important;
  animation: msSearchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes msSearchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. MÀN MỜ TỐI NỀN TRANG WEB KHI TÌM KIẾM (BACKDROP) */
.dgwt-wcas-dark-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transition: opacity 0.25s ease !important;
  z-index: 999998 !important;
}

/* 4. TIÊU ĐỀ PHÂN MỤC (HEADLINE: DANH MỤC / SẢN PHẨM) */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: 1px solid #f1f5f9 !important;
  border-left: 3px solid #253989 !important;
  cursor: default !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline:first-child {
  border-top: none !important;
}

/* 5. GỢI Ý DANH MỤC (TAXONOMY SUGGESTION) - CHUẨN UX/UI RÕ RÀNG, DỄ NHÌN */
.dgwt-wcas-suggestion-tax {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  position: relative !important;
}

.dgwt-wcas-suggestion-tax:hover,
.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected {
  background: #f0f7ff !important;
  padding-left: 20px !important;
}

/* Icon thư mục đại diện danh mục sang xịn, nhận diện trực quan */
.dgwt-wcas-suggestion-tax::before {
  content: "\f07b" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #253989 !important;
  background: #eef4ff !important;
  border: 1px solid #dbeafe !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.dgwt-wcas-suggestion-tax:hover::before,
.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected::before {
  background: #253989 !important;
  color: #ffffff !important;
  border-color: #253989 !important;
  transform: scale(1.05) !important;
}

/* Tên danh mục: Block / inline tự nhiên, TUYỆT ĐỐI KHÔNG flex để không vỡ chữ */
.dgwt-wcas-suggestion-tax .dgwt-wcas-st {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dgwt-wcas-suggestion-tax .dgwt-wcas-st::before {
  display: none !important;
  content: none !important;
}

/* Highlight từ khóa người dùng gõ trong tên danh mục: Đỏ tươi logo chuẩn nét */
.dgwt-wcas-suggestion-tax .dgwt-wcas-st strong,
.dgwt-wcas-suggestion-tax .dgwt-wcas-st mark {
  display: inline !important;
  background: transparent !important;
  color: #ed1c24 !important;
  font-weight: 800 !important;
}

/* Breadcrumbs (danh mục cha): Dạng thẻ tag pill thanh lịch bên dưới tên danh mục */
.dgwt-wcas-suggestion-tax .dgwt-wcas-st-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  margin-top: 4px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
}

.dgwt-wcas-suggestion-tax .dgwt-wcas-st-breadcrumbs::before {
  content: "\f02b" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 9px !important;
  color: #64748b !important;
}

.dgwt-wcas-suggestion-tax .dgwt-wcas-st-label-in {
  color: #64748b !important;
  font-style: normal !important;
  font-weight: 500 !important;
  margin-right: 2px !important;
}

/* Mũi tên chỉ báo điều hướng chevron-right bên phải */
.dgwt-wcas-suggestion-tax::after {
  content: "\f054" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: #cbd5e1 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.dgwt-wcas-suggestion-tax:hover::after,
.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected::after {
  color: #253989 !important;
  transform: translateX(3px) !important;
}

/* 6. GỢI Ý SẢN PHẨM (PRODUCT SUGGESTION) */
.dgwt-wcas-suggestion-product {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.dgwt-wcas-suggestion-product:hover,
.dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected {
  background: #f8fafc !important;
}

.dgwt-wcas-suggestion-product:hover .dgwt-wcas-st-title {
  color: #253989 !important;
}

/* Thumbnail sản phẩm */
.dgwt-wcas-si {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.dgwt-wcas-si img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Nội dung text sản phẩm */
.dgwt-wcas-content-wrapp {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.dgwt-wcas-st {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}

/* Highlight từ khóa khớp: Đỏ tươi thương hiệu */
.dgwt-wcas-st mark,
.dgwt-wcas-st strong,
.dgwt-wcas-suggestion mark,
.dgwt-wcas-suggestion strong {
  background: transparent !important;
  color: #ed1c24 !important;
  font-weight: 800 !important;
}

/* Giá sản phẩm chuẩn đỏ tươi */
.dgwt-wcas-sp {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ed1c24 !important;
}

.dgwt-wcas-sp del {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-right: 5px !important;
}

.dgwt-wcas-sp ins {
  text-decoration: none !important;
  color: #ed1c24 !important;
}

/* 7. NÚT XEM TẤT CẢ KẾT QUẢ Ở ĐÁY DROPDOWN */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more,
a.dgwt-wcas-suggestion-more,
.dgwt-wcas-details-more-products {
  background: #f8fafc !important;
  padding: 12px 16px !important;
  text-align: center !important;
  color: #253989 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-top: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover,
a.dgwt-wcas-suggestion-more:hover,
.dgwt-wcas-details-more-products:hover {
  background: #253989 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 8. KHÔNG TÌM THẤY KẾT QUẢ */
.dgwt-wcas-suggestion-nores {
  padding: 22px 16px !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 13px !important;
}

.dgwt-wcas-suggestion-nores p {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
}

/* 9. TỐI ƯU GIAO DIỆN DROPDOWN TRÊN ĐIỆN THOẠI (MOBILE UX) */
@media (max-width: 768px) {
  .site-header-modern .mobile-search-row {
    padding: 6px 12px 10px !important;
    position: relative !important;
  }

  .site-header-modern .mobile-search-row .dgwt-wcas-search-wrapp {
    position: relative !important;
  }

  .site-header-modern .mobile-search-row .dgwt-wcas-sf-wrapp {
    border-radius: 20px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  }

  .site-header-modern .mobile-search-row .dgwt-wcas-search-input {
    height: 40px !important;
    font-size: 13.5px !important;
    padding-left: 16px !important;
  }

  .site-header-modern .mobile-search-row .dgwt-wcas-search-submit {
    height: 40px !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 0 16px !important;
  }

  /* Khung dropdown trên điện thoại */
  .dgwt-wcas-suggestions-wrapp {
    max-height: 70vh !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22) !important;
  }

  .dgwt-wcas-suggestion-product {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  .dgwt-wcas-si {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .dgwt-wcas-st {
    font-size: 12.5px !important;
  }

  .dgwt-wcas-sp {
    font-size: 13px !important;
  }

  .dgwt-wcas-suggestion-tax {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  .dgwt-wcas-suggestion-tax:hover,
  .dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected {
    padding-left: 14px !important;
  }

  .dgwt-wcas-suggestion-tax::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .dgwt-wcas-suggestion-tax .dgwt-wcas-st {
    font-size: 12.5px !important;
  }

  .dgwt-wcas-suggestion-tax .dgwt-wcas-st-breadcrumbs {
    font-size: 10px !important;
    padding: 1px 6px !important;
    margin-top: 3px !important;
  }
}