@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&subset=vietnamese&display=swap');

/* ==========================================================================
   SUMIKA VIỆT NAM - NƯỚC i-ON XANH OFFICIAL THEME STYLESHEET
   Brand Colors: #007840 (Sumika Green), #F37021 (Sumika Orange)
   Typography: Manrope (Google Fonts - Standard on sumika.vn)
   ========================================================================== */

:root {
  /* Sumika Brand Palette */
  --primary: #00874E;
  --primary-color: #00874E;
  /* Official Sumika Green */
  --primary-dark: #005a30;
  /* Deep Sumika Green */
  --primary-light: #0f8f50;
  /* Light Emerald Green */
  --primary-glow: #10B981;
  /* Vivid Soft Green */
  --primary-bg: #F0FDF4;
  /* Subtle Green Tint */

  --accent: #F37021;
  /* Official Sumika Orange */
  --accent-hover: #D95D12;
  /* Deep Orange */
  --accent-gold: #F59E0B;
  /* Warm Warning/Highlight */
  --accent-blue: #0284C7;
  /* Clean Water Blue */

  /* Neutral Surface & Backgrounds */
  --bg-page: #F8FAF9;
  --bg-card: #FFFFFF;
  --bg-surface: #F1F5F4;
  --bg-dark: #0D2619;

  /* Typography Colors */
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-light: #FFFFFF;

  /* Borders & Shadows */
  --border-color: #E2E8F0;
  --border-primary: rgba(0, 120, 64, 0.25);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 120, 64, 0.08);
  --shadow-lg: 0 16px 36px rgba(0, 120, 64, 0.12);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  /* Transition */
  --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* WORDPRESS CONTENT & CAPTION CONTAINMENT (PREVENTS 910px OVERFLOW) */
.wp-caption,
div.wp-caption,
figure.wp-caption {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wp-caption img,
div.wp-caption img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.wp-caption .wp-caption-text {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   TOPBAR (EXACT MATCH WITH SUMIKA.VN IMAGE)
   ========================================================================== */
.top-bar-official {
  background: #008000;
  background-image: linear-gradient(180deg, #008000 -19.33%, #008000 140.03%);
  color: #FFFFFF;
  font-size: 0.88rem;
  padding: 8px 0;
  position: relative;
  z-index: 1002;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.top-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.top-hotline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.96rem;
  text-decoration: none;
  letter-spacing: 0.3px;
}

.top-hotline-link i {
  font-size: 1rem;
}

.top-hotline-link:hover {
  color: #DCFCE7;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.top-link i {
  font-size: 0.95rem;
}

.top-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.top-divider {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
}

.top-cart-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding: 2px 8px;
  transition: var(--transition);
}

.top-cart-btn:hover {
  transform: scale(1.1);
}

.top-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #F59E0B;
  color: #000000;
  font-size: 0.7rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   STICKY NAVBAR OFFICIAL (LOGO, MENU & SEARCH)
   ========================================================================== */
.navbar-official {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, padding 0.2s ease;
}

.navbar-official-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo-img,
body.woocommerce .brand-logo-img,
body.woocommerce-page .brand-logo-img,
.navbar-official .brand-logo-img {
  height: 38px !important;
  max-height: 38px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.nav-desktop-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-item-link {
  color: #334155;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none !important;
  transition: var(--transition);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.nav-item-link:hover,
.nav-item-link.active {
  color: #00874E;
  text-decoration: none !important;
}

.nav-item-link::after {
  display: none !important;
}

/* SEARCH FORM (MATCHING USER IMAGE) */
.nav-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.nav-search-form {
  display: flex;
  align-items: center;
  position: relative;
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: #FFFFFF;
  transition: var(--transition);
  width: 230px;
}

.nav-search-form:focus-within {
  border-color: #00874E;
  box-shadow: 0 0 0 3px rgba(0, 135, 78, 0.12);
  width: 260px;
}

.search-input {
  border: none;
  outline: none;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-family: 'Manrope', sans-serif;
  color: var(--text-primary);
  width: 100%;
  background: transparent;
}

.search-submit-btn {
  background: #00874E;
  color: #FFFFFF;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.search-submit-btn:hover {
  background: #00682a;
}

/* MOBILE TOGGLE & BUTTONS */
.navbar-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar-mobile-toggle span {
  width: 100%;
  height: 2.5px;
  background: #0F172A;
  border-radius: 2px;
  transition: var(--transition);
}

.navbar-mobile-actions {
  display: none;
  align-items: center;
  gap: 12px;
}

.mobile-search-trigger,
.mobile-cart-trigger {
  background: transparent;
  border: none;
  font-size: 1.15rem;
  color: #0F172A;
  cursor: pointer;
  position: relative;
  padding: 4px;
}

.mobile-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #F37021;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MOBILE DRAWER (OFF-CANVAS) */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 290px;
  height: 100%;
  background: #FFFFFF;
  z-index: 999999;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer.active {
  left: 0;
}

.mobile-drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.mobile-drawer-logo {
  height: 32px;
  max-width: 180px;
  object-fit: contain;
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: #475569;
  cursor: pointer;
  line-height: 1;
}

.mobile-drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-nav-list {
  list-style: none;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.92rem;
  color: #1E293B;
  transition: var(--transition);
  margin-bottom: 5px;
}

.mobile-nav-item i {
  color: #00874E;
  font-size: 1rem;
  width: 20px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  background: #E8F5EE;
  color: #00874E;
}

.mobile-drawer-contact {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.drawer-contact-title {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 700;
}

.drawer-hotline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #00874E;
  color: #FFFFFF;
  padding: 10px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 135, 78, 0.25);
}

.drawer-phone-sub,
.drawer-mail-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #475569;
  margin-bottom: 5px;
}

/* Mobile search dropdown */
.mobile-search-dropdown {
  display: none;
  padding: 10px 20px;
  background: #F8FAFC;
  border-top: 1px solid var(--border-color);
}

.mobile-search-dropdown.active {
  display: block;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #00874E;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mobile-search-input {
  width: 100%;
  padding: 8px 14px;
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
}

.mobile-search-btn {
  background: #00874E;
  color: #FFFFFF;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #0F9F58 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 120, 64, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 6px 20px rgba(0, 120, 64, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--primary);
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary-dark);
}

.btn-accent {
  background: linear-gradient(135deg, #F37021 0%, #EA580C 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(243, 112, 33, 0.3);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  box-shadow: 0 6px 20px rgba(243, 112, 33, 0.4);
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  padding: 44px 0 54px;
  background: linear-gradient(180deg, #EDF7F2 0%, #F8FAF9 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 120, 64, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}

.hero-content {
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: #DCFCE7;
  border: 1px solid rgba(0, 120, 64, 0.25);
  border-radius: var(--radius-full);
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.hero-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.6px;
  margin-bottom: 16px;
  line-height: 1.22;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}

.hero-subtitle strong {
  color: var(--primary-dark);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 120, 64, 0.12);
  transition: var(--transition);
}

.hero-image-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 120, 64, 0.18);
}

.hero-image-wrapper img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.hero-floating-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: linear-gradient(135deg, #F37021 0%, #EA580C 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 16px rgba(243, 112, 33, 0.35);
  border: 2px solid #FFFFFF;
  letter-spacing: 0.3px;
  animation: pulseBadge 2.5s infinite;
}

@keyframes pulseBadge {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* HERO STATS BAR */
.hero-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
  padding: 20px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border-right: 1px solid var(--border-color);
}

.stat-item:last-child {
  border-right: none;
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: #E8F5EE;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-value {
  font-weight: 800;
  font-size: 0.98rem;
  color: #0F172A;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   SECTIONS GENERAL
   ========================================================================== */
.section {
  padding: 64px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}

.section-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
  border: 1px solid rgba(0, 120, 64, 0.2);
}

.section-title {
  font-size: 1.95rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
  letter-spacing: -0.4px;
}

.section-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   PRODUCTS GRID & CARDS
   ========================================================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.product-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  padding: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 120, 64, 0.35);
  box-shadow: var(--shadow-md);
}

.product-card.featured {
  border-color: var(--primary);
  box-shadow: 0 8px 30px rgba(0, 120, 64, 0.16);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFB 100%);
}

.product-badge-featured {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent) 0%, #EA580C 100%);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.product-img-box {
  width: 100%;
  height: 230px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #F1F5F9;
}

.product-img-box img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.product-card:hover .product-img-box img {
  transform: scale(1.05);
}

.product-volume-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: #E8F5EE;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.35;
  min-height: 48px;
}

.product-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  flex-grow: 1;
}

.product-gift-list {
  background: #FFFBEB;
  border: 1px dashed #F59E0B;
  color: #B45309;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.product-price-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.price-current {
  font-size: 1.55rem;
  font-weight: 800;
  color: #B91C1C;
}

.price-old {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.discount-badge {
  background: #FEE2E2;
  color: #DC2626;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.product-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.product-card-actions .btn {
  padding: 10px 12px;
  font-size: 0.82rem;
}

/* ==========================================================================
   BEFORE & AFTER INTERACTIVE SLIDER
   ========================================================================== */
.before-after-section {
  padding: 12px 0 18px !important;
  background: #FFFFFF;
}

.before-after-section .container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.before-after-section .section-header {
  margin: 0 auto 10px !important;
  text-align: center;
}

.before-after-section .section-tag {
  margin-bottom: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
}

.before-after-section .section-title {
  margin: 0 0 4px !important;
  font-size: 1.65rem !important;
}

.before-after-section .section-subtitle {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}

.ba-section {
  background: #FFFFFF;
}

.ba-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px !important;
  flex-wrap: wrap;
}

.ba-tab {
  padding: 6px 14px !important;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  font-size: 0.82rem !important;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.ba-tab:hover {
  background: #E2E8F0;
}

.ba-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 120, 64, 0.25);
}

.ba-slider-container {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(380px, 44vw, 620px) !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  margin: 0 auto;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: ew-resize;
  border: 1.5px solid var(--border-color, #E2E8F0);
  background: #0F172A;
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ba-after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/* The after image MUST match the container width dynamically so the two images align seamlessly */
.ba-after-wrapper .ba-image,
.ba-after-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ba-container-width, 100%) !important;
  min-width: var(--ba-container-width, 100%) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #FFFFFF;
  z-index: 10;
  transform: translateX(-50%);
  cursor: ew-resize;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

.ba-handle-button,
.ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--primary);
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ba-label {
  position: absolute;
  bottom: 18px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.label-before {
  left: 18px;
  right: auto;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
}

.label-after {
  right: 18px;
  left: auto;
  background: rgba(0, 120, 64, 0.9);
  color: #FFFFFF;
}

/* ==========================================================================
   HOMEPAGE BLOG SECTION (CẨM NANG VÀ KINH NGHIỆM)
   ========================================================================== */
.home-blog-section {
  padding: 44px 0 54px !important;
  background: #FFFFFF;
}

.home-blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.home-blog-header-left {
  max-width: 680px;
}

.home-blog-header-left .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 50px;
  background: #E8F5E9;
  color: #00874E;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 135, 78, 0.2);
}

.home-blog-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.25;
}

.btn-home-blog-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  background: #FFFFFF;
  color: #00874E !important;
  border: 1.5px solid #00874E;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 135, 78, 0.08);
  transition: all 0.3s ease;
}

.btn-home-blog-more:hover {
  background: #00874E;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 135, 78, 0.22);
}

.btn-home-blog-more i {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.btn-home-blog-more:hover i {
  transform: translateX(3px);
}

.home-blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.home-blog-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid var(--border-color, #E2E8F0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-blog-card:hover {
  border-color: rgba(0, 135, 78, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 135, 78, 0.1);
}

.home-blog-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F1F5F9;
}

.home-blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease;
}

.home-blog-card:hover .home-blog-thumb img {
  transform: scale(1.05);
}

.home-blog-brand-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary, #00874E);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.home-blog-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.home-blog-cat {
  display: inline-block;
  background: #E8F5E9;
  color: #00874E;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(0, 135, 78, 0.15);
}

.home-blog-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 8px;
  color: #0F172A;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}

.home-blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-blog-card-title a:hover {
  color: var(--primary, #00874E);
}

.home-blog-author {
  font-size: 0.76rem;
  color: #94A3B8;
  margin-bottom: 8px;
}

.home-blog-excerpt {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.home-blog-readmore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary, #00874E);
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.home-blog-readmore:hover {
  color: var(--accent, #F37021);
  gap: 10px;
}

.home-blog-readmore i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.home-blog-readmore:hover i {
  transform: translateX(2px);
}

@media (max-width: 1024px) {
  .home-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .home-blog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .home-blog-title {
    font-size: 1.5rem;
  }

  .home-blog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* STAIN MATRIX CALCULATOR STYLES */
#stainCalc {
  padding: 24px 0 48px !important;
}

.stain-calculator {
  max-width: 860px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.stain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.stain-btn {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.stain-btn:hover {
  background: #E2E8F0;
  border-color: #CBD5E1;
}

.stain-btn.active {
  background: var(--primary-bg);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 120, 64, 0.15);
}

.stain-icon {
  font-size: 1.35rem;
  color: var(--primary);
}

.stain-btn.active .stain-icon {
  color: var(--primary-dark);
  transform: scale(1.1);
}

.stain-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0F172A;
  text-align: center;
}

.stain-result-card {
  background: linear-gradient(145deg, #F0FDF4 0%, #E8F5EE 100%);
  border: 1.5px solid rgba(0, 120, 64, 0.25);
  border-radius: var(--radius-md);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.result-item h5 {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.result-item p {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.product-card.popular {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(243, 112, 33, 0.18);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF8 100%);
}

.badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent) 0%, #EA580C 100%);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ==========================================================================
   STAIN & AREA CALCULATOR
   ========================================================================== */
.calc-card {
  max-width: 860px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.calc-input-group {
  margin-bottom: 20px;
}

.calc-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0F172A;
  margin-bottom: 8px;
}

.calc-select,
.calc-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  color: var(--text-primary);
  background: #F8FAFC;
  outline: none;
  transition: var(--transition);
}

.calc-select:focus,
.calc-input:focus {
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 120, 64, 0.12);
}

.calc-results-box {
  background: linear-gradient(145deg, #F0FDF4 0%, #E8F5EE 100%);
  border: 1.5px solid rgba(0, 120, 64, 0.25);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calc-result-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin-bottom: 14px;
}

.calc-result-metric {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.calc-result-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

/* ==========================================================================
   MODERN SPLIT COMPARISON SECTION (BẢO CHỨNG CHẤT LƯỢNG)
   ========================================================================== */
.home-comparison-section {
  padding: 85px 0 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  position: relative;
}

.home-comparison-section .section-header {
  max-width: 820px;
  margin: 0 auto 46px;
}

.home-comparison-section .highlight-green {
  color: #00874E;
  position: relative;
  display: inline-block;
}

/* 2-Column Split Cards */
.comparison-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1.14fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
}

.compare-card {
  border-radius: 24px;
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 1. Legacy Card */
.compare-card-legacy {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
}

.compare-card-legacy:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

.compare-badge-warning {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.compare-card-legacy .compare-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #334155;
  margin: 0 0 4px;
  line-height: 1.3;
}

.compare-card-legacy .compare-card-subtitle {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0;
}

.compare-feature-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compare-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.compare-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.compare-icon-wrap.icon-warning {
  background: #FEE2E2;
  color: #DC2626;
  font-size: 0.86rem;
}

.compare-item-text h4 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.35;
}

.compare-card-legacy .compare-item-text h4 {
  color: #475569;
}

.compare-item-text p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #64748B;
  margin: 0;
}

.compare-card-footer {
  margin-top: auto;
  padding-top: 18px;
}

.legacy-card-note {
  background: #F1F5F9;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748B;
  font-size: 0.82rem;
  line-height: 1.45;
}

.legacy-card-note i {
  color: #94A3B8;
  font-size: 1rem;
  flex-shrink: 0;
}

/* 2. Sumika Hero Card */
.compare-card-sumika {
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border: 2px solid #00874E;
  box-shadow: 0 16px 40px rgba(0, 135, 78, 0.12);
  position: relative;
  overflow: visible;
}

.compare-card-sumika:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 135, 78, 0.18);
  border-color: #005a30;
}

.compare-top-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00874E 0%, #005a30 100%);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 6px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.35);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.compare-top-ribbon i {
  color: #FBBF24;
}

.compare-badge-premium {
  background: #DCFCE7;
  color: #00874E;
  border: 1px solid #86EFAC;
}

.compare-card-sumika .compare-card-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #00874E;
  margin: 0 0 4px;
  line-height: 1.3;
}

.compare-card-sumika .compare-card-subtitle {
  font-size: 0.9rem;
  color: #1E293B;
  font-weight: 600;
  margin: 0;
}

.compare-icon-wrap.icon-success {
  background: #DCFCE7;
  color: #00874E;
  font-size: 0.95rem;
  font-weight: 900;
}

.compare-card-sumika .compare-item-text h4 {
  color: #0F172A;
}

.compare-card-sumika .compare-item-text p {
  color: #334155;
}

.sumika-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px dashed #BBF7D0;
}

.btn-compare-buy {
  background: #F37021;
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(243, 112, 33, 0.28);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-compare-buy:hover {
  background: #d85c12;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(243, 112, 33, 0.38);
  color: #FFFFFF !important;
}

.compare-trust-shield {
  font-size: 0.82rem;
  font-weight: 700;
  color: #00874E;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bottom Stats Bar */
.comparison-stats-bar {
  max-width: 900px;
  margin: 48px auto 0;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 22px 36px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.comp-stat-item {
  text-align: center;
  flex: 1;
}

.comp-stat-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #00874E;
  line-height: 1;
  margin-bottom: 6px;
}

.comp-stat-unit {
  font-size: 1.15rem;
  font-weight: 800;
  color: #F37021;
  margin-left: 2px;
}

.comp-stat-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #475569;
}

.comp-stat-divider {
  width: 1px;
  height: 44px;
  background: #E2E8F0;
}

/* Responsive Queries for Comparison Section */
@media (max-width: 991px) {
  .home-comparison-section {
    padding: 65px 0 70px;
  }
  .comparison-cards-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .compare-card-sumika {
    order: -1; /* Đẩy thẻ Sumika lên trước trên màn hình nhỏ để tăng chuyển đổi */
  }
  .comparison-stats-bar {
    padding: 20px 24px;
  }
  .comp-stat-num {
    font-size: 1.85rem;
  }
  .comp-stat-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 640px) {
  .home-comparison-section {
    padding: 50px 0 55px;
  }
  .compare-card {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .compare-top-ribbon {
    font-size: 0.65rem;
    padding: 5px 14px;
  }
  .compare-card-sumika .compare-card-title {
    font-size: 1.3rem;
  }
  .compare-card-legacy .compare-card-title {
    font-size: 1.18rem;
  }
  .sumika-cta-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .btn-compare-buy {
    justify-content: center;
    width: 100%;
  }
  .compare-trust-shield {
    justify-content: center;
  }
  .comparison-stats-bar {
    flex-direction: column;
    gap: 18px;
    padding: 20px 18px;
    margin-top: 36px;
  }
  .comp-stat-divider {
    width: 60%;
    height: 1px;
  }
}

/* ==========================================================================
   BACK TO TOP SECTION
   ========================================================================== */
.back-to-top-wrapper {
  background: #FFFFFF;
  padding: 16px 0 10px;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

.btn-back-to-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
}

.btn-back-to-top i {
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.btn-back-to-top:hover {
  color: #00874E;
}

.btn-back-to-top:hover i {
  transform: translateY(-3px);
}

/* ==========================================================================
   OFFICIAL SUMIKA GREEN FOOTER (100% MATCH WITH SUMIKA.VN)
   ========================================================================== */
.footer-sumika-official {
  background: #008000;
  background-image: linear-gradient(180deg, #008000 -19.33%, #008000 140.03%);
  color: #FFFFFF;
  padding: 44px 0 20px;
}

.footer-official-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1.35fr;
  gap: 36px;
  margin-bottom: 32px;
}

/* COLUMN 1 */
.footer-brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.footer-brand-title i {
  font-size: 1.35rem;
}

.footer-info-list {
  list-style: none;
  margin-bottom: 22px;
}

.footer-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.62;
  margin-bottom: 11px;
}

.footer-info-list li i {
  font-size: 1.05rem;
  margin-top: 3px;
  flex-shrink: 0;
  color: #FFFFFF;
}

.footer-feedback-box {
  margin-top: 16px;
}

.feedback-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.feedback-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-feedback-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0F172A;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-feedback-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  background: #F8FAFC;
  color: #008000;
}

.pill-icon.yellow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F59E0B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* COLUMNS 2 & 3 */
.footer-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links-list {
  list-style: none;
}

.footer-links-list li {
  margin-bottom: 9px;
}

.footer-links-list a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.96rem;
  line-height: 1.5;
  transition: var(--transition);
  display: inline-block;
}

.footer-links-list a:hover {
  color: #FFFFFF;
  transform: translateX(3px);
  text-decoration: underline;
}

/* SOCIAL & BADGES */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.social-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #008000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.social-circle:hover {
  transform: scale(1.1);
}

.social-circle .social-icon-svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.social-circle.facebook-circle .social-icon-svg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.social-circle.zalo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.social-circle.zalo-circle .zalo-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.bocongthuong-badge img {
  height: 34px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #FFFFFF;
  padding: 2px 4px;
}

.dmca-badge img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* COPYRIGHT BAR */
.footer-copyright-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 22px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.2px;
}

.footer-copyright-bar p {
  margin: 0;
  color: #FFFFFF;
}

.footer-copyright-bar a {
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-copyright-bar a:hover {
  opacity: 0.85;
  color: #FEF08A;
  text-decoration: none;
}

/* ==========================================================================
   FLOATING CONTACT WIDGETS (RIGHT EDGE)
   ========================================================================== */
.floating-contact-widgets {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.float-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
  text-decoration: none;
}

.float-btn:hover {
  transform: scale(1.12);
}

.float-phone {
  color: #00874E;
  font-size: 1.25rem;
  border: 2px solid #00874E;
  animation: phonePulse 2s infinite;
}

@keyframes phonePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 135, 78, 0.4);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(0, 135, 78, 0);
  }
}

.float-zalo {
  border: 2px solid #0068FF;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-zalo .float-zalo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.float-messenger {
  color: #0084FF;
  font-size: 1.35rem;
  border: 2px solid #0084FF;
}

/* MOBILE BOTTOM CONTACT DOCK (HIDDEN ON DESKTOP) */
.sumika-bottom-dock {
  display: none;
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer {
  position: absolute;
  top: 0;
  right: -420px;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-drawer-overlay.active .cart-drawer {
  right: 0;
}

.cart-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
}

.cart-close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}

.cart-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.cart-empty {
  text-align: center;
  padding: 40px 10px;
  color: var(--text-muted);
}

.cart-empty i {
  font-size: 3rem;
  color: #CBD5E1;
  margin-bottom: 12px;
}

.cart-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}

.cart-item-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  border: 1px solid var(--border-color);
}

.cart-item-info {
  flex-grow: 1;
}

.cart-item-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F172A;
  margin-bottom: 4px;
  line-height: 1.3;
}

.cart-item-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #B91C1C;
  margin-bottom: 6px;
}

.cart-quantity-ctrl {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.btn-qty {
  width: 26px;
  height: 26px;
  background: #F1F5F9;
  border: none;
  font-weight: 800;
  cursor: pointer;
}

.btn-qty:hover {
  background: #E2E8F0;
}

.cart-footer {
  padding: 20px;
  border-top: 1px solid var(--border-color);
  background: #F8FAFC;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 1.05rem;
}

.cart-total-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: #B91C1C;
}

.cart-checkout-btn {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
}

/* ==========================================================================
   PRODUCT DETAIL MODAL (PDP) & CHECKOUT MODAL (STRICTLY HIDDEN BY DEFAULT)
   ========================================================================== */
#pdpModalOverlay:not(.active),
#modalOverlay:not(.active),
#cartDrawerOverlay:not(.active) {
  display: none !important;
}

.modal-overlay,
.pdp-overlay,
.pdp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.active,
.pdp-overlay.active,
.pdp-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex !important;
}

.modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 30px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close,
.pdp-close,
.pdp-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  font-size: 1.3rem;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
}

.modal-close:hover,
.pdp-close:hover,
.pdp-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

/* PDP Modal Specific */
.pdp-modal,
.pdp-modal-container {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  padding: 32px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.pdp-modal-overlay.active .pdp-modal-container {
  transform: translateY(0);
}

.pdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
}

.pdp-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pdp-breadcrumb a {
  color: #64748B;
  transition: var(--transition);
}

.pdp-breadcrumb a:hover {
  color: #00874E;
}

.pdp-brand-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #00874E;
  background: #E8F5EE;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.pdp-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  margin-bottom: 24px;
}

.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-main-img-box {
  width: 100%;
  height: 320px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.pdp-main-img-box img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.pdp-badge-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #00874E;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.pdp-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}

.pdp-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  object-fit: cover;
  cursor: pointer;
  transition: var(--transition);
}

.pdp-thumb.active,
.pdp-thumb:hover {
  border-color: #00874E;
}

.pdp-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  line-height: 1.3;
}

.pdp-meta-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stars {
  color: #F59E0B;
}

.score {
  font-weight: 800;
  color: #0F172A;
}

.sku {
  color: #94A3B8;
  margin-left: 6px;
}

.pdp-option-section {
  margin-bottom: 16px;
}

.pdp-option-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.pdp-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pdp-option-btn {
  background: #F8FAFC;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pdp-option-btn:hover {
  border-color: #CBD5E1;
}

.pdp-option-btn.active {
  background: #E8F5EE;
  border-color: #00874E;
}

.opt-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}

.opt-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #00874E;
}

.opt-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pdp-price-card {
  background: #F8FAFC;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.pdp-price-current {
  font-size: 1.5rem;
  font-weight: 800;
  color: #B91C1C;
}

.pdp-price-old {
  font-size: 0.95rem;
  color: #94A3B8;
  text-decoration: line-through;
}

.pdp-discount-tag {
  background: #FEE2E2;
  color: #DC2626;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.pdp-gift-box {
  font-size: 0.82rem;
  color: #D97706;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-actions-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.pdp-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.btn-pdp-qty {
  width: 32px;
  height: 38px;
  background: #F1F5F9;
  border: none;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.btn-pdp-qty:hover {
  background: #E2E8F0;
}

#pdpQtyInput {
  width: 36px;
  height: 38px;
  text-align: center;
  border: none;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  outline: none;
}

.pdp-btn-group {
  display: flex;
  gap: 8px;
  flex-grow: 1;
}

.btn-pdp-buy {
  flex: 1.3;
  padding: 10px;
  font-size: 0.85rem;
}

.btn-pdp-cart {
  flex: 1;
  padding: 10px;
  font-size: 0.85rem;
}

.pdp-trust-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust-item i {
  color: #00874E;
}

.pdp-details-tabs {
  margin-top: 20px;
  border-top: 1.5px solid var(--border-color);
  padding-top: 18px;
}

.pdp-tab-headers {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid var(--border-color);
  margin-bottom: 16px;
  overflow-x: auto;
}

.pdp-tab-btn {
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.84rem;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: var(--transition);
}

.pdp-tab-btn.active {
  color: #00874E;
}

.pdp-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: #00874E;
}

.pdp-tab-content {
  display: none;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pdp-tab-content.active {
  display: block;
}

.pdp-feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.pdp-fcard {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
}

.pdp-fcard h4 {
  font-size: 0.88rem;
  color: #0F172A;
  margin-bottom: 6px;
}

.pdp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.pdp-table th,
.pdp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

.pdp-table th {
  width: 32%;
  background: #F8FAFC;
  font-weight: 700;
  color: #0F172A;
}

.pdp-step-list {
  padding-left: 20px;
}

.pdp-step-list li {
  margin-bottom: 8px;
}

.pdp-warning-box {
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 14px;
  color: #92400E;
}

.pdp-warning-box h4 {
  color: #B45309;
  font-size: 0.88rem;
  margin-bottom: 6px;
}

/* ==========================================================================
   FORM & TOAST STYLES
   ========================================================================== */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0F172A;
  margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: #FFFFFF;
  outline: none;
  transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #00874E;
  box-shadow: 0 0 0 3px rgba(0, 135, 78, 0.15);
}

/* Toast System - Top Floating Modern Pill */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast,
.toast-message {
  background: rgba(15, 23, 42, 0.94);
  color: #FFFFFF;
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toastSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 420px;
}

.toast i.toast-icon,
.toast-message i.toast-icon {
  color: #22C55E;
  font-size: 1.15rem;
}

@keyframes toastSlideDown {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .toast-container {
    top: 16px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
  }

  .toast,
  .toast-message {
    padding: 10px 18px;
    font-size: 0.82rem;
    white-space: nowrap;
    border-radius: 40px;
  }
}

/* ==========================================================================
   RESPONSIVE LAYOUTS (MOBILE / TABLET / DESKTOP)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-grid {
    grid-template-columns: 1fr;
  }

  .pdp-main-grid {
    grid-template-columns: 1fr;
  }

  .sumika-cart-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-official-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* TOPBAR MOBILE */
  .top-bar-official {
    padding: 6px 0;
  }

  .top-bar-container {
    justify-content: center;
  }

  .top-bar-right {
    display: none; /* Accessible in mobile drawer and header actions */
  }

  .top-hotline-link {
    font-size: 0.84rem;
    text-align: center;
    white-space: normal;
    gap: 6px;
    line-height: 1.3;
    justify-content: center;
  }

  /* NAVBAR MOBILE */
  .nav-desktop-menu,
  .nav-search-wrap {
    display: none !important;
  }

  .navbar-mobile-toggle {
    display: flex;
  }

  .navbar-mobile-actions {
    display: flex;
  }

  .navbar-official {
    padding: 8px 0;
  }

  .brand-logo-img {
    height: 30px;
    max-width: 140px;
  }

  @media (max-width: 360px) {
    .brand-logo-img {
      height: 25px !important;
      max-width: 110px !important;
    }
    .navbar-mobile-actions {
      gap: 6px !important;
    }
  }

  /* HERO SECTION & CTA */
  .hero {
    padding: 30px 0 20px;
  }

  .hero-container {
    padding: 0 16px;
    gap: 24px;
  }

  .hero-tag {
    font-size: 0.72rem;
    padding: 5px 12px;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
    display: inline-flex;
    margin-bottom: 12px;
  }

  .hero-title {
    font-size: 1.55rem;
    line-height: 1.3;
    margin-bottom: 12px;
    word-break: break-word;
  }

  .hero-subtitle {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  /* HERO CTA BUTTONS - FULL MOBILE RESPONSIVENESS */
  .hero-cta {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 24px;
  }

  .hero-cta .btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.95rem;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    border-radius: var(--radius-md);
  }

  .hero-cta .btn i {
    font-size: 1.05rem;
  }

  .hero-image-wrapper {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero-floating-badge {
    font-size: 0.72rem;
    padding: 5px 10px;
    top: 8px;
    left: 8px;
  }

  /* HERO STATS */
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    margin-top: 20px;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
  }

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

  /* PRODUCTS SECTION & CTAs */
  .section {
    padding: 40px 0;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 1.45rem;
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-card {
    padding: 20px 16px;
  }

  .product-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .product-card-actions .btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 0.92rem;
    justify-content: center;
  }

  /* BEFORE & AFTER SECTION */
  .ba-tabs {
    flex-direction: column;
    gap: 8px;
  }

  .ba-tab {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.85rem;
    justify-content: center;
  }

  .ba-slider-container {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    touch-action: pan-y;
  }

  .ba-label {
    font-size: 0.65rem;
    padding: 4px 8px;
  }

  /* STAIN CALCULATOR */
  .stain-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stain-btn {
    padding: 12px 8px;
    font-size: 0.82rem;
  }

  .stain-btn .stain-icon {
    font-size: 1.4rem;
  }

  .stain-result-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 14px;
  }

  /* COMPARISON TABLE */
  .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 10px 12px;
    font-size: 0.84rem;
    white-space: normal;
    min-width: 130px;
  }

  /* FOOTER */
  .footer-official-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom-flex {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* HIDE VERTICAL FLOATING BALLS ON MOBILE (REPLACED BY HORIZONTAL BOTTOM DOCK) */
  .floating-contact-widgets {
    display: none !important;
  }

  body {
    padding-bottom: 58px !important;
  }

  /* MOBILE BOTTOM CONTACT DOCK (HORIZONTAL CTA: GỌI ĐIỆN | CHAT ZALO | MESSENGER) */
  .sumika-bottom-dock {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08) !important;
    z-index: 99999 !important;
  }

  .sumika-bottom-dock .dock-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    position: relative !important;
    border-right: 1px solid #F1F5F9 !important;
    transition: background 0.15s ease !important;
  }

  .sumika-bottom-dock .dock-item:last-child {
    border-right: none !important;
  }

  .sumika-bottom-dock .dock-item:active {
    background: #F8FAFC !important;
  }

  .dock-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
  }

  .dock-icon-phone {
    background: #E0F2FE;
    color: #0284C7;
  }

  .dock-icon-zalo {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dock-icon-zalo .dock-zalo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
  }

  .dock-icon-messenger {
    background: #EFF6FF;
    color: #0084FF;
    font-size: 0.95rem;
  }

  .dock-label {
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .back-to-top-wrapper {
    padding: 14px 0 10px;
    background: #FFFFFF;
    text-align: center;
    border-top: 1px solid var(--border-color);
  }

  .btn-back-to-top {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: auto;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.5px;
    position: static;
  }

  .btn-back-to-top i {
    font-size: 0.9rem;
    color: #00874E;
  }

  /* PDP MODAL */
  .pdp-modal-content {
    max-width: 95vw;
    margin: 20px auto;
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }

  /* CART DRAWER */
  .cart-drawer-content {
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.38rem;
  }

  .hero-subtitle {
    font-size: 0.88rem;
  }

  .product-price-box {
    flex-wrap: wrap;
    gap: 8px;
  }

  .price-current {
    font-size: 1.35rem;
  }

  .stain-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stain-btn .stain-name {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   PAGE: ABOUT US / GIỚI THIỆU SUMIKA VIỆT NAM
   ========================================================================== */
/* ABOUT BREADCRUMBS BAR */
.about-breadcrumbs-bar {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 14px 0;
}

/* 1. TOPGIA STYLE STORY HERO BANNER */
.about-topgia-story-hero {
  position: relative;
  overflow: hidden;
  padding: 85px 20px 80px;
  background: linear-gradient(135deg, #052314 0%, #005a30 50%, #00874E 100%);
  color: #FFFFFF;
  text-align: center;
}

.about-topgia-story-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--story-bg, url('../images/hero_spray.jpg'));
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
}

.story-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.25) 0%, rgba(5, 35, 20, 0.7) 80%);
  pointer-events: none;
}

.about-topgia-story-hero .relative-z {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FDE68A;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 auto 20px;
  backdrop-filter: blur(8px);
}

.story-hero-title {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0 auto 20px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.story-hero-desc {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* 2. INTERACTIVE ACCORDION (TẦM NHÌN, SỨ MỆNH, GIÁ TRỊ CỐT LÕI) */
.about-expandable-vm-section {
  padding: 60px 0;
  background: #FFFFFF;
}

.vm-expandable-desktop {
  display: flex;
  height: 520px;
  gap: 20px;
  overflow: hidden;
  width: 100%;
}

.vm-acc-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* Collapsed state */
.vm-acc-item:not(.active) {
  flex: 1;
  min-width: 110px;
  max-width: 130px;
  background: #00874E;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.vm-acc-item:not(.active) .vm-expanded-view {
  display: none !important;
}

.vm-acc-item:not(.active) .vm-collapsed-view {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.vm-collapsed-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vm-collapsed-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 135, 78, 0.88) 0%, rgba(6, 43, 24, 0.92) 100%);
  transition: background 0.3s ease;
}

.vm-acc-item:not(.active):hover .vm-collapsed-overlay {
  background: linear-gradient(180deg, rgba(0, 150, 88, 0.85) 0%, rgba(6, 43, 24, 0.88) 100%);
}

.vm-collapsed-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.25rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.vm-collapsed-label {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Active expanded state */
.vm-acc-item.active {
  flex: 4.5;
  background: #F0FDF4;
  border: 1.5px solid #A7F3D0;
  box-shadow: 0 10px 30px rgba(0, 135, 78, 0.08);
  padding: 24px;
  cursor: default;
}

.vm-acc-item.active .vm-collapsed-view {
  display: none !important;
}

.vm-acc-item.active .vm-expanded-view {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
  width: 100%;
}

.vm-expanded-media {
  width: 48%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #FFFFFF;
}

.vm-expanded-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vm-expanded-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 24px;
}

.vm-expanded-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

.vm-expanded-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #00874E;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.vm-title-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 135, 78, 0.12);
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.vm-expanded-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #334155;
  max-width: 460px;
  margin: 0 auto;
  font-weight: 400;
}

/* Mobile expandable view */
.vm-expandable-mobile {
  display: none;
}

.vm-mobile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.vm-mobile-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.vm-mobile-tab-btn.active {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
  box-shadow: 0 4px 12px rgba(0, 135, 78, 0.2);
}

.vm-mobile-panes {
  width: 100%;
}

.vm-mobile-pane {
  display: none;
  background: #F0FDF4;
  border: 1.5px solid #A7F3D0;
  border-radius: 18px;
  padding: 20px;
}

.vm-mobile-pane.active {
  display: block;
  animation: fadeIn 0.35s ease;
}

.vm-mobile-media {
  width: 100%;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.vm-mobile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vm-mobile-text h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #00874E;
  margin-bottom: 10px;
  text-align: center;
}

.vm-mobile-text p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  text-align: center;
}

/* 3. COMMITMENTS SECTION (TOPGIA 2-COLUMN) */
.commit-two-col-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
}

.commit-pill-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #00874E;
  background: rgba(0, 135, 78, 0.1);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.commit-section-heading {
  font-size: 2.1rem;
  font-weight: 800;
  color: #00874E;
  line-height: 1.25;
  margin-bottom: 18px;
}

.commit-desc-p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 14px;
}

.commit-stats-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.commit-stat-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.commit-stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 135, 78, 0.1);
  border-color: #00874E;
}

.stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 135, 78, 0.1);
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 12px;
}

.stat-number {
  font-size: 2.1rem;
  font-weight: 800;
  color: #00874E;
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-number .stat-plus {
  color: #F37021;
}

.stat-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

/* 4. TECH ADVANTAGES SECTION */
.about-tech-advantages-section {
  padding: 70px 0;
  background: #FFFFFF;
}

.tech-advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.tech-adv-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 30px 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.tech-adv-card:hover {
  transform: translateY(-6px);
  border-color: #00874E;
  box-shadow: 0 14px 30px rgba(0, 135, 78, 0.12);
}

.adv-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #F0FDF4;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  border: 1px solid #DCFCE7;
}

.adv-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
  margin-bottom: 12px;
}

.adv-card-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #64748B;
  margin: 0;
}

/* 5. PARTNERS INFINITE MARQUEE SLIDER (TOPGIA STYLE) */
.about-partners-marquee-section {
  padding: 60px 0 70px;
  background: #FFFFFF;
  border-top: 1px solid #F1F5F9;
  overflow: hidden;
  user-select: none;
  text-align: center;
}

.about-partners-marquee-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}

.partners-marquee-heading {
  font-size: 2.1rem;
  font-weight: 800;
  color: #00874E;
  margin: 0 auto 12px;
  text-align: center;
  width: 100%;
}

.partners-marquee-sub {
  font-size: 0.98rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto 36px;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

.marquee-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.marquee-fade-left,
.marquee-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}

.marquee-fade-left {
  left: 0;
  background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-fade-right {
  right: 0;
  background: linear-gradient(to left, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marqueeScroll 26s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  flex-shrink: 0;
}

.marquee-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  transition: transform 0.3s ease;
}

.marquee-logo-item:hover {
  transform: scale(1.1);
}

.marquee-logo-item img {
  max-height: 48px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ecosystem-card:hover {
  transform: translateY(-8px);
  border-color: #00874E;
  box-shadow: 0 16px 36px rgba(0, 135, 78, 0.16);
}

.ecosystem-card.feature-focus {
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border: 2px solid #00874E;
  box-shadow: 0 8px 24px rgba(0, 135, 78, 0.14);
}

.eco-badge {
  display: inline-block;
  align-self: flex-start;
  background: #00874E;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

.eco-badge-neutral {
  background: #F1F5F9;
  color: #475569;
}

.eco-img-wrap {
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
}

.eco-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.ecosystem-card:hover .eco-img-wrap img {
  transform: scale(1.08);
}

.eco-subtitle-tag {
  font-size: 0.7rem;
  font-weight: 800;
  color: #00874E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.eco-title {
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #0F172A;
  line-height: 1.35;
}

.eco-desc {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 14px;
}

.eco-features {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 18px;
}

.eco-features span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.eco-features i {
  color: #00874E;
  font-size: 0.88rem;
  width: 16px;
  flex-shrink: 0;
}

.eco-card-bottom {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
}

/* MAIN SITE PROMO BANNER */
.eco-main-site-banner {
  margin-top: 45px;
  background: linear-gradient(135deg, #062b18 0%, #005a30 60%, #00874E 100%);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 90, 48, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.eco-main-site-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.main-site-badge {
  display: inline-block;
  background: rgba(243, 112, 33, 0.25);
  border: 1px solid rgba(243, 112, 33, 0.5);
  color: #FFD2A6;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.main-site-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.main-site-text h3 {
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.35;
}

.main-site-text p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 680px;
}

.main-site-action {
  flex-shrink: 0;
}

.eco-list li {
  position: relative;
  padding-left: 16px;
  line-height: 1.45;
}

.eco-list li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: #00874E;
  font-size: 1.2rem;
  line-height: 1;
}

/* TIMELINE SECTION */
.timeline-container {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding-left: 30px;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 3px;
  background: linear-gradient(180deg, #CBD5E1 0%, #00874E 100%);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 36px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #64748B;
  transition: var(--transition);
}

.timeline-item.current .timeline-dot {
  border-color: #00874E;
  background: #00874E;
  color: #FFFFFF;
  box-shadow: 0 0 0 5px rgba(0, 135, 78, 0.25);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 135, 78, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(0, 135, 78, 0.4); }
}

.timeline-content {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: var(--transition);
}

.timeline-item:hover .timeline-content {
  border-color: #00874E;
  box-shadow: var(--shadow-sm);
  background: #FFFFFF;
}

.timeline-item.current .timeline-content {
  background: #F0FDF4;
  border-color: rgba(0, 135, 78, 0.35);
}

.timeline-year {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  color: #00874E;
  background: #DCFCE7;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}

.timeline-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.timeline-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* COMMITMENTS SECTION */
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.commitment-box {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  transition: var(--transition);
}

.commitment-box:hover {
  border-color: #00874E;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.commit-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
  transition: var(--transition);
}

.commitment-box:hover .commit-icon {
  background: #00874E;
  color: #FFFFFF;
}

.commit-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.commit-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* LEGAL & SHOWROOM SECTION */
.about-legal-section {
  background: #FFFFFF;
}

.legal-card-wrapper {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.legal-company-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #005a30;
  margin-bottom: 8px;
  line-height: 1.35;
}

.legal-summary {
  font-size: 0.94rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.legal-details-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-details-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.legal-details-list li i {
  color: #00874E;
  font-size: 1.15rem;
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
}

.legal-details-list li strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.legal-details-list li span {
  font-weight: 600;
  line-height: 1.45;
}

.legal-details-list li a {
  color: #00874E;
  text-decoration: underline;
}

.legal-action-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 30px 24px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.action-badge {
  display: inline-block;
  background: #FEF3C7;
  color: #B45309;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.legal-action-box h4 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.legal-action-box p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.legal-action-box .action-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
}

/* ABOUT BOTTOM CTA */
.about-cta-section {
  background: linear-gradient(135deg, #00874E 0%, #005a30 100%);
  color: #FFFFFF;
  padding: 65px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

.cta-mini-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin: 0 auto 16px;
  color: #DCFCE7;
  text-align: center;
}

.cta-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 auto 16px;
  max-width: 820px;
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

.cta-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 680px;
  margin: 0 auto 30px;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 0.96rem;
}

.btn-light-theme {
  background: #FFFFFF;
  color: #00874E;
  border: none;
}

.btn-light-theme:hover {
  background: #F0FDF4;
  color: #005a30;
}

/* ==========================================================================
   ABOUT PAGE RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .story-main-img {
    height: 380px;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .commitments-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-card-wrapper {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 40px 0 35px;
  }

  .about-hero-title {
    font-size: 1.65rem;
    line-height: 1.3;
  }

  .about-hero-subtitle {
    font-size: 0.92rem;
    margin-bottom: 24px;
  }

  .about-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 8px;
    padding: 18px 12px;
  }

  .about-stat-item:nth-child(2) {
    border-right: none;
  }

  .about-stat-number {
    font-size: 1.65rem;
  }

  .story-main-img {
    height: 280px;
  }

  .story-floating-tag {
    position: static;
    margin-top: 12px;
  }

  .story-inset-card {
    display: none;
  }

  .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eco-main-site-banner {
    padding: 24px 20px;
    margin-top: 30px;
  }

  .main-site-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .main-site-action {
    width: 100%;
  }

  .main-site-action .btn {
    width: 100%;
    justify-content: center;
  }

  .commitments-grid {
    grid-template-columns: 1fr;
  }

  .cta-title {
    font-size: 1.45rem;
  }

  .cta-desc {
    font-size: 0.9rem;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .timeline-container {
    padding-left: 24px;
  }

  .timeline-dot {
    left: -24px;
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .about-hero-title {
    font-size: 1.45rem;
  }

  .about-hero-stats {
    grid-template-columns: 1fr;
  }

  .about-stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 10px;
  }

  .about-stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   PAGE SẢN PHẨM & WOOCOMMERCE SHOP STYLES
   ========================================================================== */
.shop-hero {
  position: relative;
  padding: 48px 0 54px;
  background: linear-gradient(135deg, #022c15 0%, #004d20 50%, #00874E 100%);
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
}

.shop-hero-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(243, 112, 33, 0.15) 0%, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(52, 211, 153, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.shop-hero-container {
  position: relative;
  z-index: 2;
}

.shop-hero-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 14px auto;
  max-width: 860px;
}

.shop-hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 760px;
  margin: 0 auto 32px;
}

/* SHOP PERKS BAR */
.shop-perks-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.shop-perk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.shop-perk-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #FBBF24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.shop-perk-content strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: #FFFFFF;
}

.shop-perk-content span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

/* ==========================================================================
   TOPGIA-STYLE 2-COLUMN SHOP CATALOG (SUMIKA BRAND IDENTITY)
   ========================================================================== */

/* SHOP BANNER & HEADER */
.shop-custom-banner {
  padding: 20px 0 0;
  background: #F8FAFC;
}

.shop-banner-inner {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.shop-banner-media {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.shop-catalog-heading-row {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #64748B;
}

.shop-breadcrumbs a {
  color: #64748B;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.shop-breadcrumbs a:hover {
  color: #00874E;
}

.shop-breadcrumbs .bc-sep {
  font-size: 0.72rem;
  color: #94A3B8;
}

.shop-breadcrumbs .bc-current {
  color: #0F172A;
  font-weight: 700;
}

.shop-heading-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #1E293B;
  margin: 0;
  letter-spacing: -0.02em;
}

/* SHOP CATALOG SECTION */
.shop-catalog-section {
  background: #F8FAFC;
  padding: 34px 0 65px;
}

/* 2-COLUMN LAYOUT */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* LEFT SIDEBAR: CATEGORY ACCORDION CARD */
.shop-sidebar {
  position: sticky;
  top: 90px;
  z-index: 10;
}

.shop-sidebar-close,
.shop-filter-backdrop,
.btn-shop-filter-trigger {
  display: none;
}

.shop-sidebar-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.shop-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  user-select: none;
  background: #FFFFFF;
  transition: background 0.2s ease;
}

.shop-sidebar-header:hover {
  background: #F8FAFC;
}

.shop-sidebar-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-sidebar-title i {
  color: #00874E;
  font-size: 0.95rem;
}

.shop-sidebar-chevron {
  color: #64748B;
  font-size: 0.82rem;
  transition: transform 0.25s ease;
}

.shop-sidebar-content {
  padding: 12px 14px 16px;
  transition: all 0.3s ease;
}

.shop-sidebar-content.is-collapsed {
  display: none;
}

.shop-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-cat-item {
  margin: 0;
  padding: 0;
}

.shop-cat-label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  color: #334155;
  transition: all 0.2s ease;
  user-select: none;
  margin: 0;
  text-decoration: none !important;
}

.shop-cat-label:hover {
  background: #F1F5F9;
  color: #00874E;
}

.shop-cat-label.active {
  background: #F0FDF4;
  color: #00874E;
  font-weight: 700;
}

.shop-cat-radio {
  display: none !important;
}

/* CUSTOM CIRCLE RADIO BUTTON (TOPGIA STYLE IN SUMIKA GREEN) */
.custom-radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.shop-cat-label:hover .custom-radio-circle {
  border-color: #94A3B8;
}

.shop-cat-label.active .custom-radio-circle {
  border-color: #00874E;
}

.shop-cat-label.active .custom-radio-circle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00874E;
}

.cat-label-text {
  flex: 1;
}

/* RIGHT MAIN CONTENT: TOOLBAR */
.shop-top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 12px 18px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.btn-mobile-cat-trigger {
  display: none;
}

.shop-sort-count-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shop-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-sort-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
  white-space: nowrap;
}

.shop-select-box {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shop-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 12px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #1E293B;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.shop-sort-select:focus {
  border-color: #00874E;
}

.select-arrow {
  position: absolute;
  right: 10px;
  color: #64748B;
  font-size: 0.72rem;
  pointer-events: none;
}

.shop-count-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-count-pipe {
  color: #CBD5E1;
  font-weight: 300;
}

.shop-count-text {
  font-size: 0.9rem;
  color: #475569;
  white-space: nowrap;
}

.shop-count-text strong {
  color: #0F172A;
  font-weight: 800;
}

/* PRODUCTS GRID */
.shop-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}

/* PRODUCT CARD */
.shop-product-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.shop-product-card.is-hidden {
  display: none !important;
}

.shop-product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 135, 78, 0.4) !important;
}

/* SQUARE FULL BLEED THUMBNAIL */
.shop-card-thumb {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.shop-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.shop-product-card:hover .shop-card-thumb img {
  transform: scale(1.05) !important;
}

/* DISCOUNT BADGE (TOP RIGHT) */
.shop-badge-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
  z-index: 2;
}

/* CARD BODY */
.shop-card-body {
  padding: 16px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.shop-card-cat-wrap {
  margin-bottom: 8px;
}

.shop-card-cat-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #00874E;
  background: #E8F5E9;
  padding: 3px 9px;
  border-radius: 6px;
}

.shop-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  color: #0F172A;
  margin: 0 0 8px 0;
  min-height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-card-title a {
  color: #0F172A;
  text-decoration: none;
  transition: color 0.2s ease;
}

.shop-card-title a:hover {
  color: #00874E;
}

.shop-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.shop-card-stars {
  color: #F59E0B;
  font-size: 0.8rem;
  display: flex;
  gap: 2px;
}

.shop-card-score {
  font-weight: 700;
  font-size: 0.84rem;
  color: #1E293B;
}

/* PRICE ROW */
.shop-card-price-row {
  margin-top: auto;
  padding: 10px 0 12px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.shop-price-current {
  font-size: 1.35rem;
  font-weight: 800;
  color: #00874E;
  line-height: 1;
}

.shop-price-old {
  font-size: 0.88rem;
  color: #94A3B8;
  text-decoration: line-through;
}

.shop-price-saving {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ACTION BUTTONS */
.shop-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 6px;
}

.btn-shop-view {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F1F5F9;
  color: #334155 !important;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-shop-view:hover {
  background: #E2E8F0;
  color: #0F172A !important;
  border-color: #94A3B8;
}

.btn-shop-add-cart {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #00874E;
  color: #FFFFFF !important;
  border: 1px solid #00874E;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 135, 78, 0.22);
}

.btn-shop-add-cart:hover {
  background: #006027;
  border-color: #006027;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0, 135, 78, 0.32);
}

.btn-shop-add-cart.btn-added-success {
  background: #16A34A !important;
  border-color: #16A34A !important;
}

/* EMPTY FILTER STATE */
.shop-empty-filter {
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  border-radius: 14px;
  padding: 50px 24px;
  text-align: center;
  color: #64748B;
}

.shop-empty-filter .empty-icon {
  font-size: 3rem;
  color: #94A3B8;
  margin-bottom: 14px;
}

.shop-empty-filter h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
}

.shop-empty-filter p {
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.btn-reset-cat {
  display: inline-block;
  padding: 9px 20px;
  background: #00874E;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-reset-cat:hover {
  background: #006027;
}

/* WP-PAGENAVI & PAGINATION */
.shop-pagination-wrap {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  clear: both;
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #334155;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.wp-pagenavi a:hover {
  border-color: #00874E;
  color: #00874E;
  background: #F0FDF4;
}

.wp-pagenavi span.current {
  border-color: #00874E;
  background: #00874E;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 135, 78, 0.25);
}

.wp-pagenavi span.pages {
  display: none;
}

/* CATEGORY SEO DESCRIPTION SECTION */
.shop-category-desc-section {
  background: #F8FAFC;
  padding: 0 0 55px;
}

.shop-category-desc-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 34px 38px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

@media (max-width: 767px) {
  .shop-category-desc-card {
    padding: 20px 18px;
    border-radius: 10px;
  }
}

.shop-category-desc-body {
  color: #334155;
  font-size: 0.98rem;
  line-height: 1.8;
}

.shop-category-desc-body h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 22px 0 12px;
  line-height: 1.35;
}

.shop-category-desc-body h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 20px 0 10px;
  line-height: 1.4;
}

.shop-category-desc-body h2.text-center,
.shop-category-desc-body h3.text-center,
.shop-category-desc-body .text-center {
  text-align: center !important;
}

.shop-category-desc-body p {
  margin-bottom: 14px;
  line-height: 1.75;
  color: #334155;
}

/* BOLD TEXT */
.shop-category-desc-body strong,
.shop-category-desc-body b,
.shop-category-desc-body h2 strong,
.shop-category-desc-body h3 strong,
.shop-category-desc-body p strong {
  font-weight: 800 !important;
  color: #0F172A !important;
}

/* LINKS: KHÔNG GẠCH CHÂN */
.shop-category-desc-body a {
  color: #00874E !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  transition: color 0.2s ease;
}

.shop-category-desc-body a:hover {
  color: #006027 !important;
  text-decoration: none !important;
}

/* LISTS */
.shop-category-desc-body ul {
  list-style: disc !important;
  margin: 12px 0 18px 24px !important;
  padding-left: 6px !important;
}

.shop-category-desc-body ol {
  list-style: decimal !important;
  margin: 12px 0 18px 24px !important;
  padding-left: 6px !important;
}

.shop-category-desc-body li {
  margin-bottom: 8px !important;
  line-height: 1.65;
  color: #334155;
}

.shop-category-desc-body li p {
  margin-bottom: 0 !important;
  display: inline;
}

/* IMAGES & WP-CAPTION (HOÀN TOÀN THEO CẤU HÌNH CỦA BÀI VIẾT / EDITOR) */
.shop-category-desc-body::after,
.shop-category-desc-body .fullcontent::after {
  content: "";
  display: table;
  clear: both;
}

.shop-category-desc-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  vertical-align: middle;
}

/* 1. Căn giữa: CHỈ KHI trong editor chọn Căn Giữa (aligncenter) */
.shop-category-desc-body .aligncenter,
.shop-category-desc-body img.aligncenter,
.shop-category-desc-body .wp-caption.aligncenter,
.shop-category-desc-body figure.aligncenter,
.shop-category-desc-body .wp-block-image.aligncenter {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  clear: both;
}
.shop-category-desc-body .aligncenter img,
.shop-category-desc-body figure.aligncenter img {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* 2. Căn trái: CHỈ KHI trong editor chọn Căn Trái (alignleft) */
.shop-category-desc-body .alignleft,
.shop-category-desc-body img.alignleft,
.shop-category-desc-body .wp-caption.alignleft,
.shop-category-desc-body figure.alignleft,
.shop-category-desc-body .wp-block-image.alignleft {
  float: left !important;
  margin: 6px 20px 16px 0 !important;
  display: table;
}

/* 3. Căn phải: CHỈ KHI trong editor chọn Căn Phải (alignright) */
.shop-category-desc-body .alignright,
.shop-category-desc-body img.alignright,
.shop-category-desc-body .wp-caption.alignright,
.shop-category-desc-body figure.alignright,
.shop-category-desc-body .wp-block-image.alignright {
  float: right !important;
  margin: 6px 0 16px 20px !important;
  display: table;
}

/* 4. Không căn / Mặc định (alignnone): giữ nguyên lề tự nhiên, không ép ra giữa */
.shop-category-desc-body .alignnone,
.shop-category-desc-body img.alignnone,
.shop-category-desc-body .wp-caption.alignnone,
.shop-category-desc-body figure.alignnone,
.shop-category-desc-body .wp-block-image.alignnone {
  float: none !important;
  margin: 12px 0 !important;
  display: inline-block;
  max-width: 100% !important;
}

.shop-category-desc-body .wp-caption {
  max-width: 100% !important;
  margin-bottom: 20px;
}

.shop-category-desc-body .wp-caption-text,
.shop-category-desc-body figcaption {
  font-size: 0.88rem !important;
  color: #64748B !important;
  font-style: italic !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  text-align: center;
}

/* WHY SUMIKA FEATURES */
.shop-features-section {
  background: #FFFFFF;
  padding: 70px 0;
}

.shop-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.shop-feature-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 30px 22px;
  text-align: center;
  transition: all 0.3s ease;
}

.shop-feature-card:hover {
  transform: translateY(-5px);
  border-color: #00874E !important;
  box-shadow: 0 14px 32px rgba(0, 135, 78, 0.12) !important;
  background: #FFFFFF !important;
}

.shop-feature-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #E8F5EE !important;
  color: #00874E !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
  transition: all 0.3s ease;
}

.shop-feature-icon i {
  color: #00874E !important;
  transition: color 0.3s ease;
}

.shop-feature-card:hover .shop-feature-icon {
  transform: scale(1.1);
  background: #00874E !important;
}

.shop-feature-card:hover .shop-feature-icon i {
  color: #FFFFFF !important;
}

.shop-feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}

.shop-feature-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* APPLICATION HIGHLIGHTS */
.shop-applications-section {
  background: #F8FAFC;
  padding: 60px 0;
}

.shop-app-box {
  background: linear-gradient(135deg, #022c15 0%, #006027 60%, #00874E 100%);
  border-radius: 24px;
  color: #FFFFFF;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 20px 48px rgba(0, 135, 78, 0.18);
}

.badge-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.shop-app-content h2 {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.3;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.shop-app-checklist {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-app-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.shop-app-checklist i {
  color: #34D399;
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.shop-app-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.shop-app-cta .btn {
  padding: 13px 24px;
  font-size: 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shop-app-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-app-img {
  width: 100%;
  max-width: 440px;
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3));
}

/* SHOP CONSULTATION CTA */
.shop-cta-section {
  background: #FFF7ED;
  border-top: 1px solid #FFEDD5;
  border-bottom: 1px solid #FFEDD5;
  padding: 44px 0;
}

.shop-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.shop-cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #EA580C;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.shop-cta-text h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.shop-cta-text p {
  color: #64748B;
  font-size: 0.95rem;
  margin: 0;
}

.shop-cta-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-cta-phone {
  background: #F37021;
  color: #FFFFFF !important;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(243, 112, 33, 0.35);
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-cta-phone:hover {
  background: #D95D12;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(243, 112, 33, 0.45);
}

.btn-cta-sub {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #1E293B !important;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-cta-sub:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

/* SINGLE PRODUCT PAGE WRAPPER */
.single-product-page-wrapper {
  background: #F8FAFC;
  padding: 24px 0 60px;
}

.single-product-breadcrumbs {
  margin-bottom: 24px;
}

.single-product-layout .woocommerce div.product {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  padding: 36px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.single-product-layout .woocommerce div.product .product_title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
}

.single-product-layout .woocommerce div.product p.price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 18px;
}

.single-product-layout .woocommerce div.product p.price del {
  color: #94A3B8;
  font-size: 1.15rem;
  font-weight: 500;
  margin-right: 8px;
}

.single-product-layout .woocommerce div.product form.cart .button {
  background: var(--primary-color) !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  transition: all 0.25s ease !important;
}

.single-product-layout .woocommerce div.product form.cart .button:hover {
  background: #006027 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 135, 78, 0.3);
}

.single-product-layout .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}

/* RESPONSIVE DESIGN FOR SHOP & PRODUCTS */
@media (max-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .shop-perks-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px 18px;
  }

  .shop-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .shop-app-box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 36px 28px;
  }

  .shop-app-checklist {
    text-align: left;
  }

  .shop-app-cta {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* CONTAINER & SECTION SPACING */
  .container {
    padding: 0 10px !important;
  }

  /* SHOP HERO MOBILE */
  .shop-hero {
    padding: 26px 0 32px;
  }

  .about-breadcrumbs {
    display: none !important;
  }

  .about-hero-badge {
    font-size: 0.68rem;
    padding: 4px 10px;
    letter-spacing: 0.2px;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    margin-bottom: 12px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .shop-hero-title {
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 8px 0 10px;
  }

  .shop-hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 20px;
    padding: 0 4px;
  }

  /* SHOP PERKS BAR MOBILE */
  .shop-perks-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .shop-perk-item {
    gap: 10px;
    align-items: center;
  }

  .shop-perk-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .shop-perk-content strong {
    font-size: 0.84rem;
    line-height: 1.3;
  }

  .shop-perk-content span {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  /* CATALOG SECTION & TOPGIA 2-COLUMN LAYOUT MOBILE */
  .shop-catalog-section {
    padding: 16px 0 40px;
  }

  .shop-custom-banner {
    padding: 12px 0 0;
  }

  .shop-banner-media {
    max-height: 200px !important;
    border-radius: 10px;
  }

  .shop-catalog-heading-row {
    margin-bottom: 16px;
  }

  .shop-heading-title {
    font-size: 1.35rem !important;
  }

  .shop-layout {
    display: block !important;
  }

  /* SHOP FILTER BACKDROP FOR MOBILE */
  .shop-filter-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  .shop-filter-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* SHOP SIDEBAR AS OFFCANVAS FILTER DRAWER ON MOBILE */
  .shop-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -330px !important;
    width: 300px !important;
    max-width: 86vw !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    background: #FFFFFF !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22) !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shop-sidebar.active {
    left: 0 !important;
  }

  .shop-sidebar-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
  }

  .shop-sidebar-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #F8FAFC !important;
    cursor: default !important;
  }

  .shop-sidebar-chevron {
    display: none !important;
  }

  .shop-sidebar-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.3rem !important;
    color: #475569 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .shop-sidebar-close:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
  }

  .shop-sidebar-content {
    display: block !important;
    padding: 16px !important;
    flex-grow: 1 !important;
    overflow-y: auto !important;
  }

  /* TOP TOOLBAR MOBILE (EXACT TOPGIA 1-ROW STYLE) */
  .shop-top-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    margin-bottom: 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    gap: 10px !important;
  }

  .btn-shop-filter-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 15px !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
  }

  .btn-shop-filter-trigger i {
    font-size: 0.85rem !important;
    color: #4B5563 !important;
  }

  .btn-shop-filter-trigger:hover,
  .btn-shop-filter-trigger.active {
    border-color: #00874E !important;
    color: #00874E !important;
    background: #F0FDF4 !important;
  }

  .btn-shop-filter-trigger.active i {
    color: #00874E !important;
  }

  .shop-sort-count-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .shop-sort-label {
    display: none !important;
  }

  .shop-count-wrap {
    display: none !important;
  }

  .shop-select-box {
    border-radius: 6px !important;
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
  }

  .shop-sort-select {
    padding: 7px 28px 7px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
  }

  .shop-count-text {
    font-size: 0.82rem !important;
  }

  /* 2-COLUMN PRODUCT GRID MOBILE */
  .shop-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .shop-product-card {
    border-radius: 12px !important;
  }

  .shop-badge-discount {
    top: 8px !important;
    right: 8px !important;
    font-size: 0.72rem !important;
    padding: 2px 7px !important;
  }

  .shop-card-body {
    padding: 10px 10px 12px !important;
  }

  .shop-card-cat-wrap {
    margin-bottom: 4px !important;
  }

  .shop-card-cat-badge {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
  }

  .shop-card-title {
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    min-height: 36px !important;
    margin-bottom: 6px !important;
  }

  .shop-card-rating {
    margin-bottom: 6px !important;
    gap: 4px !important;
  }

  .shop-card-stars {
    font-size: 0.72rem !important;
  }

  .shop-card-score {
    font-size: 0.76rem !important;
  }

  .shop-card-price-row {
    padding: 8px 0 10px !important;
    gap: 4px !important;
  }

  .shop-price-current {
    font-size: 1.12rem !important;
  }

  .shop-price-old {
    font-size: 0.78rem !important;
  }

  .shop-price-saving {
    font-size: 0.65rem !important;
    padding: 2px 5px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .shop-card-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .btn-shop-view {
    height: 34px !important;
    font-size: 0.76rem !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
  }

  .btn-shop-add-cart {
    height: 36px !important;
    font-size: 0.78rem !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
  }

  /* WHY SUMIKA FEATURES MOBILE */
  .shop-features-section {
    padding: 34px 0 !important;
  }

  .shop-features-section .section-title {
    font-size: 1.35rem !important;
  }

  .shop-features-section .section-desc {
    font-size: 0.88rem !important;
  }

  .shop-features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .shop-feature-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  .shop-feature-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
  }

  .shop-feature-card h3 {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }

  .shop-feature-card p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* APPLICATIONS SECTION MOBILE */
  .shop-applications-section {
    padding: 22px 0 !important;
  }

  .shop-app-box {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
    gap: 18px !important;
    border-radius: 16px !important;
    text-align: left !important;
  }

  .shop-app-content h2 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .shop-app-checklist {
    margin: 10px 0 16px !important;
    gap: 8px !important;
  }

  .shop-app-checklist li {
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
    gap: 8px !important;
  }

  .shop-app-media {
    order: -1 !important;
    margin-bottom: 0 !important;
  }

  .shop-app-img {
    max-height: 190px !important;
    max-width: 220px !important;
    margin: 0 auto !important;
  }

  .shop-app-cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .shop-app-cta .btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    padding: 12px 14px !important;
  }

  /* SHOP CTA SECTION MOBILE */
  .shop-cta-section {
    padding: 28px 0 !important;
  }

  .shop-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .shop-cta-text h2 {
    font-size: 1.25rem !important;
  }

  .shop-cta-text p {
    font-size: 0.86rem !important;
  }

  .shop-cta-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .btn-cta-phone, .btn-cta-sub {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  .single-product-layout .woocommerce div.product {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
   OFFICIAL SUMIKA SINGLE PRODUCT PAGE (PDP) STYLES
   ========================================================================== */
.pdp-breadcrumbs-bar {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 12px 0;
}

.pdp-breadcrumbs {
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.85rem !important;
  flex-wrap: wrap !important;
}

.pdp-breadcrumbs a {
  color: #475569 !important;
  transition: color 0.2s ease !important;
}

.pdp-breadcrumbs a:hover {
  color: #00874E !important;
}

.pdp-breadcrumbs .bc-separator {
  color: #94A3B8 !important;
  font-size: 0.72rem !important;
}

.pdp-breadcrumbs .bc-current {
  color: #0F172A !important;
  font-weight: 700 !important;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PDP MAIN SECTION */
.pdp-main-section {
  background: #FFFFFF;
  padding: 34px 0 44px;
}

.pdp-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: start;
}

/* OFFICIAL SUMIKA 3-COLUMN LAYOUT */
.sumika-official-grid {
  display: grid;
  grid-template-columns: 360px 1fr 270px;
  gap: 28px;
  align-items: start;
}

/* COLUMN 1: GALLERY - COMPACT & NEAT */
.pdp-col-gallery {
  width: 100%;
  max-width: 360px;
}

.pdp-gallery-wrap {
  position: sticky;
  top: 90px;
  max-width: 360px;
}

.pdp-main-image {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.pdp-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.pdp-main-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E293B;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0.85;
}

.pdp-main-arrow:hover {
  background: #00874E;
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.pdp-main-arrow.prev { left: 8px; }
.pdp-main-arrow.next { right: 8px; }

.pdp-badge-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
  z-index: 2;
}

.pdp-badge-official {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(240, 253, 244, 0.95);
  color: #00874E;
  border: 1px solid rgba(0, 135, 78, 0.3);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.pdp-btn-zoom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #CBD5E1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  z-index: 2;
}

.pdp-btn-zoom:hover {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
}

/* THUMBNAILS CAROUSEL */
.pdp-thumbs-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  position: relative;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.pdp-thumbs-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 2px;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  width: 0 !important;
}

.pdp-thumbs-track::-webkit-scrollbar {
  display: none;
}

.pdp-thumb-item {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pdp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}

.pdp-thumb-item:hover {
  border-color: #94A3B8;
  transform: translateY(-2px);
}

.pdp-thumb-item.active {
  border: 2px solid #00874E;
  box-shadow: 0 0 0 1px #00874E;
  transform: translateY(-2px);
}

.pdp-thumb-arrow {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #00874E;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.pdp-thumb-arrow:hover {
  background: #00874E;
  color: #FFFFFF;
}

/* WOOCOMMERCE NOTICES */
.sumika-wc-notices {
  margin-bottom: 18px;
}

.sumika-wc-notices .woocommerce-message,
.sumika-wc-notices .woocommerce-info,
.sumika-wc-notices .woocommerce-error {
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sumika-wc-notices .woocommerce-message {
  background: #F0FDF4;
  border-left: 4px solid #00874E;
  color: #166534;
}

.sumika-wc-notices .woocommerce-message .button {
  background: #00874E;
  color: #FFFFFF !important;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  transition: background 0.2s ease;
  display: inline-block;
  line-height: normal;
}

.sumika-wc-notices .woocommerce-message .button:hover {
  background: #006b2b;
}

.sumika-wc-notices .notice-msg-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.sumika-wc-notices .notice-msg-left i {
  color: #00874E;
  font-size: 1.15rem;
}

.sumika-wc-notices .notice-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sumika-wc-notices .btn-close-notice {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sumika-wc-notices .btn-close-notice:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

/* COLUMN 2: SUMIKA OFFICIAL INFO & BUY */
.pdp-col-info {
  width: 100%;
}

.pdp-info-wrap {
  width: 100%;
}

.pdp-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #00874E;
  line-height: 1.35;
  margin: 0 0 12px;
}

/* RATING BAR */
.sumika-rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #64748B;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E5E7EB;
}

.sumika-rating-bar .rating-point {
  font-weight: 700;
  color: #00874E;
}

.sumika-rating-bar .rating-stars {
  display: inline-flex;
  gap: 3px;
  font-size: 0.9rem;
}

.sumika-rating-bar .rating-stars i.filled {
  color: #F59E0B;
}

.sumika-rating-bar .rating-stars i.empty {
  color: #D1D5DB;
}

.sumika-rating-bar .rating-count {
  font-size: 0.85rem;
  color: #6B7280;
}

/* PRICE WRAP */
.sumika-price-wrap {
  margin-bottom: 20px;
}

.sumika-price-wrap .price-main-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sumika-price-wrap .price-current-num {
  font-size: 1.95rem;
  font-weight: 800;
  color: #00874E;
  line-height: 1;
}

.sumika-price-wrap .price-save-badge {
  background: #00874E;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

.sumika-price-wrap .price-old-line {
  margin-top: 6px;
}

.sumika-price-wrap .price-old-line del {
  font-size: 0.95rem;
  color: #9CA3AF;
  text-decoration: line-through;
}

/* COMBO SECTION - STRICTLY HORIZONTAL ROW */
.sumika-combo-section {
  margin-bottom: 22px;
}

.sumika-combo-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sumika-combo-label i {
  color: #00874E;
}

.sumika-combo-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  flex-wrap: nowrap;
}

.sumika-combo-btn {
  flex: 1;
  min-width: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.sumika-combo-btn:hover {
  border-color: #00874E;
  background: #F0FDF4;
}

.sumika-combo-btn.active {
  border: 2px solid #00874E;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 135, 78, 0.12);
}

.combo-top-badge {
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  z-index: 2;
  line-height: 1.2;
}

.combo-top-badge.red {
  background: #EF4444;
}

.combo-top-badge.gold {
  background: #F59E0B;
}

.combo-pill-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.combo-pill-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.combo-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

.combo-pill-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combo-pill-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #00874E;
  line-height: 1.25;
  margin-top: 3px;
  white-space: nowrap;
}

/* WOOCOMMERCE CART FORM */
.sumika-cart-form {
  margin-bottom: 20px;
}

/* QUANTITY SECTION - INLINE FORMAT (IMAGE 1 MATCH) */
.sumika-qty-section {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.sumika-qty-section .qty-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0;
  white-space: nowrap;
}

.sumika-qty-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #F8FAFC;
  overflow: hidden;
  height: 38px;
}

.sumika-qty-box .btn-qty {
  width: 34px;
  height: 38px;
  background: #F8FAFC;
  border: none;
  font-size: 1.15rem;
  font-weight: 700;
  color: #4B5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.sumika-qty-box .btn-qty:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.sumika-qty-box input {
  width: 44px;
  height: 38px;
  background: #FFFFFF;
  border: none;
  border-left: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1F2937;
  outline: none;
}

/* ACTION BUTTONS (EXACT MATCH IMAGE 1) */
.sumika-actions-wrap {
  margin-bottom: 14px;
}

.btn-text-mobile {
  display: none;
}
.btn-text-full {
  display: inline;
}

.sumika-btns-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.woocommerce div.product form.cart .button.btn-sumika-cart,
.woocommerce button.button.alt.btn-sumika-cart,
.woocommerce button.btn-sumika-cart,
.woocommerce #pdpAddToCartBtn,
button#pdpAddToCartBtn,
.btn-sumika-cart {
  flex: 1.1;
  height: 46px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 2px solid #00874E !important;
  border-radius: 8px !important;
  color: #00874E !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.94rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0, 135, 78, 0.08) !important;
  text-shadow: none !important;
}

.woocommerce div.product form.cart .button.btn-sumika-cart i,
.btn-sumika-cart i {
  color: #00874E !important;
  font-size: 1rem !important;
}

.woocommerce div.product form.cart .button.btn-sumika-cart:hover,
.woocommerce button.button.alt.btn-sumika-cart:hover,
.woocommerce button.btn-sumika-cart:hover,
.woocommerce #pdpAddToCartBtn:hover,
button#pdpAddToCartBtn:hover,
.btn-sumika-cart:hover {
  background: #F0FDF4 !important;
  background-color: #F0FDF4 !important;
  border-color: #006b2b !important;
  color: #006b2b !important;
  box-shadow: 0 2px 8px rgba(0, 135, 78, 0.18) !important;
}

.btn-sumika-buynow {
  flex: 1.15;
  height: 46px;
  background: #00874E;
  border: none;
  border-radius: 8px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.94rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 135, 78, 0.25);
}

.btn-sumika-buynow i {
  color: #FFFFFF;
  font-size: 0.92rem;
}

.btn-sumika-buynow:hover {
  background: #006b2b;
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.35);
}

/* HOTLINE ORDER BANNER (IMAGE 1 MATCH) */
.sumika-hotline-order-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #475569;
  margin-top: 10px;
}

.sumika-hotline-order-box .hotline-icon {
  color: #64748B;
  font-size: 0.95rem;
}

.sumika-hotline-order-box .hotline-num {
  color: #00874E;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sumika-hotline-order-box .hotline-num:hover {
  color: #006027;
  text-decoration: underline;
}

.sumika-hotline-order-box .hotline-sep {
  color: #94A3B8;
  font-weight: 600;
}

.sumika-coupons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sumika-coupon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #00874E;
  border-radius: 4px;
  padding: 5px 12px;
  color: #00874E;
  font-weight: 700;
  font-size: 0.82rem;
  background: #FFFFFF;
}

.sumika-coupon-badge i {
  font-size: 0.85rem;
}

.sumika-short-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #374151;
  margin-top: 14px;
  padding: 10px 0;
  border-top: 1px dashed #E5E7EB;
}

/* COLUMN 3: SUMIKA OFFICIAL POLICY CARD */
.pdp-col-policy {
  width: 100%;
}

.sumika-official-policy-card {
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 20px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.policy-card-title {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: #00874E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #E5E7EB;
}

.policy-card-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.policy-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.policy-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.policy-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.policy-icon i {
  font-size: 1.25rem;
}

.policy-icon .text-green {
  color: #00874E;
}

.policy-icon .text-blue {
  color: #0284C7;
}

.policy-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #374151;
}

.policy-desc strong {
  font-weight: 700;
  color: #111827;
}

.policy-desc a {
  color: #0284C7;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.policy-desc a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   PDP TABS & CONTENT SECTION
   ========================================================================== */
.pdp-tabs-section {
  background: #FFFFFF;
  padding: 30px 0 60px;
  border-top: 1px solid #F1F5F9;
}

.pdp-tabs-container {
  background: #FFFFFF;
  border: none !important;
  border-radius: 0;
  overflow: visible;
  box-shadow: none !important;
}

.pdp-tab-nav {
  display: flex;
  background: transparent;
  border-bottom: 2px solid #E2E8F0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pdp-tab-nav::-webkit-scrollbar {
  display: none;
}

/* TAB COMPONENT & ENFORCED MANROPE VIETNAMESE TYPOGRAPHY (IMAGE 4 FIX) */
.pdp-tabs-container,
.pdp-tab-nav,
.pdp-tab-btn,
.pdp-tab-panels,
.pdp-tab-panel,
.pdp-desc-content,
.pdp-desc-content * {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pdp-tab-btn {
  padding: 14px 26px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  font-size: 0.95rem;
  color: #64748B;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  outline: none;
}

.pdp-tab-btn i {
  color: #94A3B8;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.pdp-tab-btn:hover {
  color: #00874E;
}

.pdp-tab-btn:hover i {
  color: #00874E;
}

.pdp-tab-btn.active {
  color: #00874E;
  border-bottom-color: #00874E;
  background: #FFFFFF;
  font-weight: 800;
}

.pdp-tab-btn.active i {
  color: #00874E;
}

.pdp-tab-panels {
  padding: 30px 24px;
}

.pdp-tab-panel {
  display: none;
}

.pdp-tab-panel.active {
  display: block;
  animation: pdpFadeIn 0.25s ease;
}

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

/* TYPOGRAPHY IN TAB 1 (MÔ TẢ CHI TIẾT - FIX LỖI FONT ẢNH 4) */
.pdp-desc-content {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #334155;
}

.pdp-desc-content h1,
.pdp-desc-content h2,
.pdp-desc-content h3,
.pdp-desc-content h4,
.pdp-desc-content h5,
.pdp-desc-content h6 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  color: #0F172A;
  margin: 22px 0 10px;
  line-height: 1.4;
}

.pdp-desc-content h2 {
  font-size: 1.25rem;
}

.pdp-desc-content h3 {
  font-size: 1.15rem;
}

.pdp-desc-content h4 {
  font-size: 1.05rem;
  color: #00874E;
}

.pdp-desc-content p,
.pdp-desc-content span,
.pdp-desc-content div {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin-bottom: 12px;
}

.pdp-desc-content strong,
.pdp-desc-content b {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  color: #1E293B;
}

.pdp-desc-content a,
.pdp-desc-content a:hover,
.pdp-desc-content a:focus,
.pdp-desc-content strong a,
.pdp-desc-content a strong {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #00874E !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: color 0.15s ease;
}

.pdp-desc-content a:hover {
  color: #005a30 !important;
  text-decoration: none !important;
}

.pdp-desc-content ul,
.pdp-desc-content ol {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  padding-left: 24px;
  margin: 12px 0 16px;
}

.pdp-desc-content li {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin-bottom: 8px;
  line-height: 1.6;
}

.pdp-desc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.pdp-desc-content th,
.pdp-desc-content td {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  padding: 10px 14px;
  border: 1px solid #E2E8F0;
  font-size: 0.92rem;
}

/* WORDPRESS IMAGE CAPTIONS & ALIGNMENTS (IMAGE 1 & 4 FIX) */
.pdp-desc-content .wp-caption,
.pdp-desc-content figure.wp-caption,
.pdp-desc-content figure {
  max-width: 100% !important;
  width: auto !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ONLY center when .aligncenter is explicitly present! */
.pdp-desc-content .wp-caption.aligncenter,
.pdp-desc-content figure.aligncenter,
.pdp-desc-content .aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  text-align: center !important;
}

.pdp-desc-content .wp-caption.alignleft,
.pdp-desc-content .alignleft {
  float: left !important;
  margin: 6px 20px 16px 0 !important;
  max-width: 50% !important;
  text-align: left !important;
}

.pdp-desc-content .wp-caption.alignright,
.pdp-desc-content .alignright {
  float: right !important;
  margin: 6px 0 16px 20px !important;
  max-width: 50% !important;
  text-align: right !important;
}

.pdp-desc-content .wp-caption.alignnone,
.pdp-desc-content .alignnone {
  margin: 16px 0 !important;
  display: block !important;
  text-align: left !important;
}

/* Images inside content - NO BORDER, natural alignment */
.pdp-desc-content img {
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  display: block;
}

.pdp-desc-content .aligncenter img,
.pdp-desc-content img.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

.pdp-desc-content .alignnone img,
.pdp-desc-content img.alignnone {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Caption text - NO BORDER, natural font */
.pdp-desc-content .wp-caption .wp-caption-text,
.pdp-desc-content figcaption,
.pdp-desc-content figcaption.wp-caption-text {
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.88rem !important;
  font-style: italic !important;
  color: #64748B !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  border: none !important;
  background: transparent !important;
}

.pdp-desc-content .aligncenter .wp-caption-text,
.pdp-desc-content figure.aligncenter figcaption {
  text-align: center !important;
}

.pdp-feature-highlight-box {
  background: #F8FAFC;
  border-left: 4px solid #00874E;
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  margin: 18px 0;
}

.pdp-feature-highlight-box h4 {
  color: #00874E;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-warning-box {
  background: #FEF2F2;
  border-left: 4px solid #EF4444;
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  margin: 18px 0;
}

.pdp-warning-box h4 {
  color: #DC2626;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* TAB 2: SPECS TABLE */
.pdp-specs-table-wrap {
  overflow-x: auto;
}

.pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pdp-specs-table tr {
  border-bottom: 1px solid #E2E8F0;
}

.pdp-specs-table tr:nth-child(even) {
  background: #F8FAFC;
}

.pdp-specs-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  color: #1E293B;
  width: 250px;
  vertical-align: middle;
}

.pdp-specs-table th i {
  color: #00874E;
  margin-right: 8px;
  width: 18px;
  text-align: center;
}

.pdp-specs-table td {
  padding: 14px 18px;
  color: #475569;
  vertical-align: middle;
}

/* TAB 3: POLICIES GRID */
.pdp-policy-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pdp-policy-block {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px;
}

.pdp-policy-block h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00874E;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-policy-block ul,
.pdp-policy-block ol {
  padding-left: 20px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.6;
}

.pdp-policy-block li {
  margin-bottom: 8px;
}

/* ==========================================================================
   WOOCOMMERCE REVIEWS & COMMENT FORM STYLING (IMAGE 5 MATCH)
   ========================================================================== */
.pdp-reviews-wrap {
  background: #FFFFFF;
}

#reviews.woocommerce-Reviews {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#comments .woocommerce-Reviews-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.woocommerce-noreviews {
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  padding: 14px 18px;
  color: #64748B;
  font-size: 0.92rem;
  margin-bottom: 20px;
}

/* REVIEW FORM CONTAINER */
#review_form_wrapper {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px 28px;
}

.comment-respond .comment-reply-title {
  display: block;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #00874E !important;
  margin-bottom: 8px !important;
}

.comment-respond .comment-notes {
  font-size: 0.86rem;
  color: #64748B;
  margin-bottom: 20px;
}

.comment-respond .comment-notes .required,
.comment-form .required {
  color: #EF4444;
  font-weight: 700;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* STAR RATING */
.comment-form-rating {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.comment-form-rating label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
}

.sumika-stars-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
  cursor: pointer;
  user-select: none;
}

.sumika-stars-picker .star-item {
  font-size: 1.55rem;
  color: #D1D5DB;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
  padding: 3px 2px;
}

.sumika-stars-picker .star-item i {
  color: inherit;
}

.sumika-stars-picker .star-item.active,
.sumika-stars-picker .star-item.hover {
  color: #F59E0B !important;
}

.sumika-stars-picker .star-item:hover {
  transform: scale(1.18);
}

.sumika-stars-picker .rating-text-hint {
  margin-left: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #00874E;
  display: inline-block;
  vertical-align: middle;
}

/* Hide WooCommerce native injected stars */
.woocommerce .comment-form-rating p.stars,
.comment-form-rating p.stars,
.comment-form-rating select#rating {
  display: none !important;
}

/* FORM FIELDS (COMMENT, AUTHOR, EMAIL) */
.comment-form-comment,
.comment-form-author,
.comment-form-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.comment-form label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
}

.comment-form-comment textarea {
  width: 100% !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.94rem !important;
  color: #1F2937 !important;
  background: #FFFFFF !important;
  outline: none !important;
  min-height: 110px !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.comment-form-author input,
.comment-form-email input {
  width: 100% !important;
  max-width: 480px !important;
  height: 44px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.94rem !important;
  color: #1F2937 !important;
  background: #FFFFFF !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.comment-form textarea:focus,
.comment-form input:focus {
  border-color: #00874E !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 78, 0.15) !important;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px 0;
  font-size: 0.85rem;
  color: #475569;
}

.comment-form-cookies-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00874E;
  cursor: pointer;
}

.comment-form-cookies-consent label {
  font-weight: 500;
  font-size: 0.85rem;
  color: #475569;
  cursor: pointer;
  margin: 0;
}

/* SUBMIT BUTTON */
.form-submit {
  margin: 10px 0 0 0;
}

.form-submit #submit,
.woocommerce #reviews #respond input#submit {
  background: #00874E !important;
  background-color: #00874E !important;
  color: #FFFFFF !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 135, 78, 0.25) !important;
  display: inline-block !important;
}

.form-submit #submit:hover,
.woocommerce #reviews #respond input#submit:hover {
  background: #006b2b !important;
  background-color: #006b2b !important;
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.35) !important;
  transform: translateY(-1px);
}

/* COMMENT LIST (WHEN REVIEWS EXIST) */
.woocommerce-Reviews ol.commentlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.woocommerce-Reviews ol.commentlist li.comment {
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  background: #FFFFFF !important;
  position: relative;
}

.woocommerce-Reviews ol.commentlist li.comment img.avatar {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  float: left !important;
  margin-right: 14px !important;
  border: 1.5px solid #E2E8F0;
}

.woocommerce-Reviews ol.commentlist li.comment .comment-text {
  overflow: hidden;
}

.woocommerce-Reviews ol.commentlist li.comment .comment-text .meta {
  font-size: 0.86rem;
  color: #64748B;
  margin-bottom: 6px;
}

.woocommerce-Reviews ol.commentlist li.comment .comment-text .meta strong {
  font-size: 0.95rem;
  color: #0F172A;
  font-weight: 700;
}

.woocommerce-Reviews ol.commentlist li.comment .star-rating {
  float: right;
  color: #F59E0B;
  font-size: 0.92rem;
}

.woocommerce-Reviews ol.commentlist li.comment .description {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #334155;
  margin-top: 8px;
}

/* RELATED SECTION */
.pdp-related-section {
  background: #FFFFFF;
  padding: 50px 0 70px;
  border-top: 1px solid #E2E8F0;
}

/* STICKY MOBILE BUY BAR */
.pdp-sticky-bar-mobile {
  display: none;
}

/* ==========================================================================
   RELATED PRODUCTS SECTION (SẢN PHẨM LIÊN QUAN)
   ========================================================================== */
.pdp-related-section {
  background: #F8FAFC;
  padding: 40px 0 50px;
  border-top: 1px solid #E2E8F0;
}

.pdp-related-header {
  text-align: center;
  margin-bottom: 30px;
}

.pdp-related-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FDF4;
  color: #00874E;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 135, 78, 0.2);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pdp-related-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.pdp-related-subtitle {
  font-size: 0.92rem;
  color: #64748B;
  max-width: 580px;
  margin: 0 auto;
}

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pdp-related-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.pdp-related-card:hover {
  transform: translateY(-4px);
  border-color: #00874E;
  box-shadow: 0 8px 24px rgba(0, 135, 78, 0.12);
}

.pdp-rel-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #F1F5F9;
}

.pdp-rel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.pdp-related-card:hover .pdp-rel-thumb img {
  transform: scale(1.05);
}

.pdp-rel-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}

.pdp-rel-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pdp-rel-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00874E;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pdp-rel-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.pdp-rel-title a {
  color: #1E293B;
  transition: color 0.2s ease;
}

.pdp-rel-title a:hover {
  color: #00874E;
}

.pdp-rel-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.pdp-rel-stars {
  color: #F59E0B;
  font-size: 0.75rem;
}

.pdp-rel-score {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.pdp-rel-pricing {
  margin-top: auto;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pdp-rel-price-current {
  font-size: 1.05rem;
  font-weight: 800;
  color: #00874E;
}

.pdp-rel-price-old {
  font-size: 0.8rem;
  color: #94A3B8;
  text-decoration: line-through;
}

.pdp-rel-actions {
  display: flex;
  gap: 6px;
  width: 100%;
}

.btn-pdp-rel-view,
.btn-pdp-rel-buy {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-pdp-rel-view {
  background: #F1F5F9;
  color: #475569;
}

.btn-pdp-rel-view:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.btn-pdp-rel-buy {
  background: #00874E;
  color: #FFFFFF;
}

.btn-pdp-rel-buy:hover {
  background: #006b2b;
}

@media (max-width: 1024px) {
  .pdp-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .pdp-related-section {
    padding: 28px 0 36px;
  }

  .pdp-related-title {
    font-size: 1.25rem;
  }

  .pdp-related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pdp-rel-body {
    padding: 10px 8px 12px;
  }

  .pdp-rel-title {
    font-size: 0.82rem;
    min-height: 34px;
  }

  .pdp-rel-price-current {
    font-size: 0.95rem;
  }

  .pdp-rel-actions {
    flex-direction: column;
    gap: 5px;
  }

  .btn-pdp-rel-view,
  .btn-pdp-rel-buy {
    height: 32px;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR SINGLE PRODUCT PAGE (PDP)
   ========================================================================== */
@media (max-width: 1024px) {
  .pdp-top-grid,
  .sumika-official-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .pdp-col-policy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  /* HIDE ALL BREADCRUMBS ON MOBILE PER USER REQUEST */
  .pdp-breadcrumbs-bar,
  .pdp-breadcrumbs,
  .shop-breadcrumbs,
  .about-breadcrumbs,
  .blog-single-breadcrumbs-section,
  .page-breadcrumbs-bar {
    display: none !important;
  }

  .pdp-main-section {
    padding: 18px 0 28px;
  }

  .pdp-top-grid,
  .sumika-official-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pdp-col-policy {
    grid-column: auto;
  }

  .pdp-gallery-wrap {
    position: static;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .pdp-col-gallery {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .pdp-main-image {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin: 0 auto 10px;
    position: relative;
    overflow: hidden;
    min-width: 0 !important;
  }

  .pdp-main-image img {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 auto;
    object-fit: contain !important;
  }

  .pdp-badge-discount {
    top: 8px !important;
    left: 8px !important;
    font-size: 0.75rem !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    pointer-events: none !important;
  }

  .pdp-badge-official {
    top: 8px !important;
    right: 8px !important;
    font-size: 0.7rem !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    pointer-events: none !important;
  }

  .pdp-btn-zoom {
    bottom: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.82rem !important;
  }

  .pdp-thumbs-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 6px;
    position: relative;
    box-sizing: border-box !important;
  }

  .pdp-thumbs-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    width: 0 !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
  }

  .pdp-col-info,
  .pdp-info-wrap {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .pdp-thumb-item {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .pdp-thumb-arrow {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
    flex-shrink: 0;
  }

  .pdp-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .sumika-rating-bar {
    font-size: 0.85rem;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .sumika-price-wrap .price-current-num {
    font-size: 1.5rem;
  }

  .sumika-combo-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 2px 4px;
    width: 100%;
    box-sizing: border-box;
  }

  .sumika-combo-grid::-webkit-scrollbar {
    display: none;
  }

  .sumika-combo-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 6px 4px !important;
    border-radius: 8px !important;
  }

  .combo-pill-content {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .combo-pill-img {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  .combo-pill-text {
    min-width: 0 !important;
  }

  .combo-pill-name {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .combo-pill-price {
    font-size: 0.72rem !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
  }

  .combo-top-badge {
    font-size: 0.52rem !important;
    padding: 1px 4px !important;
    top: -7px !important;
    right: 2px !important;
    border-radius: 6px !important;
  }

  /* HORIZONTAL CTA BUTTONS ON MOBILE (NẰM NGANG) */
  .sumika-btns-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .btn-text-full {
    display: none !important;
  }
  .btn-text-mobile {
    display: inline !important;
  }

  .btn-sumika-cart,
  .btn-sumika-buynow {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    width: 50% !important;
    height: 44px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .btn-sumika-cart i,
  .btn-sumika-buynow i {
    font-size: 0.82rem !important;
  }

  body.single-product {
    padding-bottom: 70px !important;
  }

  .sumika-hotline-order-box {
    flex-wrap: wrap;
    padding: 10px 12px;
    font-size: 0.8rem;
    text-align: center;
    justify-content: center;
    line-height: 1.5;
  }

  /* TABS ON MOBILE */
  .pdp-tabs-section {
    padding: 18px 0 36px;
  }

  .pdp-tab-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .pdp-tab-panels {
    padding: 18px 0;
  }

  .pdp-desc-content {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .pdp-desc-content table {
    display: block;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .pdp-desc-content table th,
  .pdp-desc-content table td {
    min-width: 120px;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .pdp-desc-content .wp-caption.alignleft,
  .pdp-desc-content .wp-caption.alignright {
    float: none !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
  }

  /* REVIEW FORM ON MOBILE */
  #review_form_wrapper {
    padding: 16px 14px !important;
  }

  .comment-form-author input,
  .comment-form-email input {
    max-width: 100% !important;
  }

  .form-submit #submit {
    width: 100% !important;
    text-align: center;
  }

  .sumika-wc-notices .woocommerce-message {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sumika-wc-notices .notice-actions-right {
    width: 100%;
    justify-content: space-between;
  }

  /* STICKY MOBILE BUY BAR (Replaced by horizontal bottom dock) */
  .pdp-sticky-bar-mobile {
    display: none !important;
  }

  .pdp-sticky-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .pdp-sticky-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
  }

  .pdp-sticky-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .pdp-sticky-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
  }

  .pdp-sticky-price {
    font-size: 0.95rem;
    font-weight: 800;
    color: #00874E;
    line-height: 1.25;
  }

  .pdp-sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .pdp-btn-sticky-cart {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #F0FDF4;
    color: #00874E !important;
    border: 1.5px solid #00874E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
  }

  .pdp-btn-sticky-buy {
    height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    background: #00874E;
    color: #FFFFFF !important;
    font-size: 0.88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 135, 78, 0.3);
  }
}

/* ==========================================================================
   FULLSCREEN LIGHTBOX GALLERY MODAL (IMAGE 3 MATCH)
   ========================================================================== */
.sumika-lightbox-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  user-select: none;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sumika-lightbox-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 22, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
  cursor: pointer;
}

/* TOP HEADER BAR */
.lightbox-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

.lightbox-counter {
  color: #FFFFFF;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

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

.btn-lightbox-tool {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.92rem;
  transition: all 0.2s ease;
  outline: none;
}

.btn-lightbox-tool:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #38BDF8;
  transform: translateY(-1px);
}

.btn-lightbox-tool.btn-close:hover {
  background: #EF4444;
  border-color: #EF4444;
  color: #FFFFFF;
}

/* CENTER STAGE */
.lightbox-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 70px;
  overflow: hidden;
}

.lightbox-stage {
  max-width: 90vw;
  max-height: calc(84vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-stage img {
  max-width: 100%;
  max-height: calc(84vh - 120px);
  object-fit: contain;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease, transform 0.3s ease;
  cursor: zoom-in;
}

.lightbox-stage.zoomed img {
  transform: scale(1.6);
  cursor: zoom-out;
}

/* NAVIGATION ARROWS */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
  outline: none;
}

.lightbox-nav-btn:hover {
  background: #00874E;
  border-color: #00874E;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
}

.lightbox-nav-btn.prev {
  left: 24px;
}

.lightbox-nav-btn.next {
  right: 24px;
}

/* BOTTOM THUMBNAILS BAR */
.lightbox-thumbs-bar {
  position: relative;
  z-index: 3;
  padding: 16px 20px 22px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lightbox-thumbs-bar.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.lightbox-thumbs-track {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.lightbox-thumb-item {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  background: #FFFFFF;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-thumb-item:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* ACTIVE THUMBNAIL (MATCHING EXACT CYAN/BLUE BORDER IN IMAGE 3) */
.lightbox-thumb-item.active {
  opacity: 1;
  border-color: #38BDF8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
  transform: translateY(-2px);
}

/* RESPONSIVE LIGHTBOX */
@media (max-width: 768px) {
  .lightbox-header {
    padding: 12px 16px;
  }
  .lightbox-body {
    padding: 10px 10px;
  }
  .lightbox-nav-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .lightbox-nav-btn.prev {
    left: 8px;
  }
  .lightbox-nav-btn.next {
    right: 8px;
  }
  .lightbox-thumb-item {
    width: 44px;
    height: 44px;
  }
  .lightbox-thumbs-bar {
    padding: 10px 12px 14px;
  }
}

/* ==========================================================================
   PAGE TEMPLATE & BREADCRUMBS
   ========================================================================== */
.page-main-content {
  padding: 30px 0 60px;
  min-height: 55vh;
  background: #F8FAFC;
}

.sumika-page-article {
  width: 100%;
}

/* ==========================================================================
   SUMIKA CART PAGE
   ========================================================================== */
.sumika-cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}

.sumika-cart-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.sumika-cart-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid #F1F5F9;
  background: #FAFAFA;
}

.cart-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-card-title i {
  color: #00874E;
}

.cart-items-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748B;
}

.sumika-cart-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.sumika-cart-table thead th {
  background: #F8FAFC;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 12px 16px;
  border-bottom: 1px solid #E2E8F0;
  text-align: left;
}

.sumika-cart-table thead th.product-price,
.sumika-cart-table thead th.product-quantity,
.sumika-cart-table thead th.product-subtotal {
  text-align: center;
}

.sumika-cart-table tbody tr.cart_item td {
  padding: 18px 16px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.sumika-cart-table tbody tr.cart_item:hover {
  background: #FCFDFD;
}

/* Remove button */
.btn-remove-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #94A3B8 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-remove-item:hover {
  background: #FEE2E2;
  color: #EF4444 !important;
}

/* Thumbnail */
.sumika-cart-table td.product-thumbnail {
  width: 95px;
  padding: 14px 10px 14px 16px;
}

.sumika-cart-table .cart-thumb-wrap {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.sumika-cart-table td.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: cover !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
  transition: transform 0.2s ease;
}

.sumika-cart-table .cart-thumb-wrap:hover img {
  transform: scale(1.05);
}

/* Name */
.cart-product-title {
  color: #0F172A;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-product-title:hover {
  color: #00874E;
}

/* Unit Price */
.cart-unit-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  display: block;
  text-align: center;
}

/* Quantity */
.sumika-cart-qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  height: 36px;
  margin: 0 auto;
}

.sumika-cart-qty-wrap .btn-cart-qty {
  width: 30px;
  height: 36px;
  border: none;
  background: #F8FAFC;
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.sumika-cart-qty-wrap .btn-cart-qty:hover {
  background: #E2E8F0;
}

.sumika-cart-qty-wrap input.qty {
  width: 40px;
  height: 36px;
  border: none;
  border-left: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0F172A;
}

/* Subtotal */
.cart-line-subtotal {
  font-size: 1.05rem;
  font-weight: 800;
  color: #00874E;
  display: block;
  text-align: center;
}

/* Actions Row: Coupon & Update */
.cart-actions-row td {
  padding: 16px 20px !important;
  background: #FAFAFA;
  border-top: 1px solid #E2E8F0;
}

.cart-actions-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sumika-coupon-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  height: 42px;
  padding-left: 12px;
}

.coupon-icon {
  color: #00874E;
  font-size: 0.95rem;
  margin-right: 6px;
}

.coupon-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 0.88rem;
  width: 170px;
  padding: 0 8px !important;
  height: 40px !important;
}

.btn-apply-coupon {
  height: 42px !important;
  background: #00874E !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0 16px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 0 7px 7px 0 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-apply-coupon:hover {
  background: #006b2b !important;
}

.btn-update-cart {
  height: 42px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-update-cart:hover {
  border-color: #00874E !important;
  color: #00874E !important;
  background: #F0FDF4 !important;
}

.cart-actions-buttons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-cart-back-shop {
  height: 42px !important;
  background: #F1F5F9 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.btn-cart-back-shop:hover {
  background: #E2E8F0 !important;
  color: #00874E !important;
  border-color: #CBD5E1 !important;
}

/* HIDE CROSS-SELLS ("Bạn có thể thích...") */
.cross-sells,
.woocommerce .cross-sells,
.woocommerce-cart .cross-sells,
.woocommerce .cart-collaterals .cross-sells,
.sumika-cart-right .cross-sells {
  display: none !important;
}

/* Cart Totals Sidebar Card */
.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals,
.sumika-cart-totals-wrapper {
  width: 100% !important;
  float: none !important;
  display: block !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals,
.cart-collaterals .cart_totals,
.cart_totals {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.cart_totals h2 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  text-align: left !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table,
.cart_totals .shop_table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  table-layout: fixed !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td,
.cart_totals .shop_table tr th,
.cart_totals .shop_table tr td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 0.92rem !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

.cart_totals .shop_table tr th {
  font-weight: 600 !important;
  color: #475569 !important;
  width: 38% !important;
  text-align: left !important;
}

.cart_totals .shop_table tr td {
  font-weight: 700 !important;
  color: #0F172A !important;
  width: 62% !important;
  text-align: right !important;
  word-break: break-word !important;
}

.cart_totals .shop_table tr td ul#shipping_method {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
}

.cart_totals .shop_table tr td ul#shipping_method li {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
}

.cart_totals .shop_table tr td .woocommerce-shipping-destination {
  margin: 6px 0 0 0 !important;
  font-size: 0.82rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.cart_totals .shipping-calculator-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #00874E !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  text-decoration: none !important;
}

.cart_totals .shipping-calculator-button:hover {
  text-decoration: underline !important;
}

.cart_totals .shipping-calculator-form {
  margin-top: 10px !important;
  text-align: left !important;
}

.cart_totals .shop_table tr.order-total th,
.cart_totals .shop_table tr.order-total td {
  border-top: 2px solid #E2E8F0 !important;
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  background: #F8FAFC !important;
}

.cart_totals .shop_table tr.order-total th {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.cart_totals .shop_table tr.order-total td strong {
  font-size: 1.35rem !important;
  color: #00874E !important;
  font-weight: 800 !important;
}

.wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  background: #00874E !important;
  color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.28) !important;
  transition: all 0.2s ease !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: #006b2b !important;
  box-shadow: 0 6px 18px rgba(0, 135, 78, 0.38) !important;
  transform: translateY(-1px);
}

/* HIDE SHIPMENT ROW ON CART TOTALS (Calculated at Checkout) */
.woocommerce-cart .cart_totals tr.shipping,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.cart_totals tr.shipping,
.cart_totals tr.woocommerce-shipping-totals {
  display: none !important;
}

/* CONTINUE SHOPPING BUTTON IN CART TOTALS */
.btn-cart-continue-shopping {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 12px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.btn-cart-continue-shopping:hover {
  background: #F0FDF4 !important;
  border-color: #00874E !important;
  color: #00874E !important;
  transform: translateY(-1px);
}

/* Cart Commitments Card */
.sumika-cart-commitments {
  margin-top: 18px;
  background: #F0FDF4;
  border: 1px dashed rgba(0, 135, 78, 0.35);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.commitment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #065F46;
  font-weight: 600;
}

.commitment-item i {
  color: #00874E;
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

/* Empty Cart Box */
.sumika-cart-empty-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 60px 24px;
  text-align: center;
  max-width: 580px;
  margin: 30px auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.empty-cart-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #F0FDF4;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin: 0 auto 20px;
  border: 2px dashed rgba(0, 135, 78, 0.25);
}

.empty-cart-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
}

.empty-cart-desc {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 26px;
}

.btn-empty-cart-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00874E;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 135, 78, 0.2);
}

.btn-empty-cart-shop:hover {
  background: #006b2b;
  transform: translateY(-2px);
}

/* ==========================================================================
   SUMIKA CHECKOUT PAGE (VIETNAM CHECKOUT SUPPORT)
   ========================================================================== */
.sumika-checkout-form {
  margin: 0;
}

.sumika-checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items: start;
}

.sumika-checkout-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
}

.checkout-card-header {
  padding: 16px 22px;
  background: #FAFAFA;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-card-title .step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00874E;
  color: #FFFFFF;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.checkout-secure-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00874E;
  background: #F0FDF4;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 135, 78, 0.2);
}

.checkout-card-body {
  padding: 22px;
}

/* WOOCOMMERCE FORM ROWS & FIELDS (VIETNAM CHECKOUT) */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  display: none !important;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.woocommerce form .form-row,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide,
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  clear: none !important;
}

.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
#billing_last_name_field,
#billing_address_1_field,
#order_comments_field {
  grid-column: 1 / -1 !important;
}

.woocommerce form .form-row label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 2px;
  display: block;
}

.woocommerce form .form-row label .required {
  color: #EF4444;
  font-weight: 800;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.92rem !important;
  color: #0F172A !important;
  padding: 10px 14px !important;
  height: 44px;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.woocommerce form .form-row textarea {
  height: 80px !important;
  line-height: 1.4 !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #00874E !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 78, 0.14) !important;
}

/* DEVVN VIETNAM CHECKOUT SELECT2 DROPDOWNS */
.select2-container,
.select2-container--default,
.woocommerce .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

.select2-container .select2-selection--single {
  height: 44px !important;
  width: 100% !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background-color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  font-size: 0.92rem !important;
  color: #0F172A !important;
  padding-left: 14px !important;
  padding-right: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #00874E !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 78, 0.14) !important;
}

.select2-dropdown {
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  font-size: 0.9rem !important;
  z-index: 99999 !important;
}

.select2-results__option {
  padding: 9px 14px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: #00874E !important;
  color: #FFFFFF !important;
}

/* CHECKOUT ORDER REVIEW BOX WITH LUXURY E-COMMERCE STYLING */
.sumika-order-review-box table.woocommerce-checkout-review-order-table,
.woocommerce table.woocommerce-checkout-review-order-table,
.sumika-checkout-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 0 16px !important;
  background: transparent !important;
}

.sumika-order-review-box table.woocommerce-checkout-review-order-table thead {
  display: none !important;
}

.sumika-order-review-box table tr th,
.sumika-order-review-box table tr td,
.sumika-checkout-order-table tr th,
.sumika-checkout-order-table tr td {
  border: none !important;
  padding: 10px 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.sumika-review-item td {
  border-bottom: 1px solid #F1F5F9 !important;
  padding: 14px 0 !important;
}

.checkout-product-item-flex {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.checkout-thumb-wrapper {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.checkout-thumb-wrapper img.checkout-thumb-img,
.checkout-thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9px !important;
  display: block !important;
}

.checkout-qty-badge {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  background: #1E293B !important;
  color: #FFFFFF !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 4px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

.checkout-info-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  text-align: left !important;
  padding-right: 8px !important;
}

.checkout-item-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.38 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.checkout-item-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  color: #64748B !important;
  font-weight: 600 !important;
}

.checkout-item-qty-tag {
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: #475569;
}

.checkout-item-subtotal {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
}

/* FOOTER TOTALS IN ORDER REVIEW */
.sumika-order-review-box table tfoot tr th {
  color: #64748B !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-align: left !important;
  padding: 8px 0 !important;
  border: none !important;
}

.sumika-order-review-box table tfoot tr td {
  text-align: right !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  font-size: 0.95rem !important;
  padding: 8px 0 !important;
  border: none !important;
}

.sumika-order-review-box table tfoot tr.cart-subtotal th,
.sumika-order-review-box table tfoot tr.cart-subtotal td {
  padding-top: 14px !important;
}

.sumika-order-review-box table tfoot tr.order-total {
  border-top: 1.5px dashed #CBD5E1 !important;
}

.sumika-order-review-box table tfoot tr.order-total th {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  padding-top: 14px !important;
  padding-bottom: 2px !important;
}

.sumika-order-review-box table tfoot tr.order-total td {
  padding-top: 14px !important;
  padding-bottom: 2px !important;
}

.sumika-order-review-box table tfoot tr.order-total td strong {
  font-size: 1.45rem !important;
  color: #00874E !important;
  font-weight: 800 !important;
}

/* PAYMENT GATEWAYS RADIO CARDS */
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: #00874E;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  accent-color: #00874E;
  transform: scale(1.15);
  margin-right: 8px;
  vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
  vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
  padding: 12px 14px !important;
  margin: 10px 0 2px !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box::before {
  display: none !important;
}

/* PLACE ORDER BUTTON */
.woocommerce-checkout #payment #place_order,
.btn-place-order {
  width: 100% !important;
  height: 52px !important;
  background: #00874E !important;
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.3) !important;
  transition: all 0.2s ease !important;
}

.woocommerce-checkout #payment #place_order:hover,
.btn-place-order:hover {
  background: #006b2b !important;
  box-shadow: 0 6px 18px rgba(0, 135, 78, 0.4) !important;
  transform: translateY(-1px);
}

/* TRUST BADGES & SUPPORT */
.checkout-support-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.support-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F0FDF4;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.support-title {
  font-size: 0.85rem;
  color: #64748B;
  font-weight: 600;
}

.support-phones a {
  color: #00874E;
  font-weight: 800;
  text-decoration: none;
}

.checkout-trust-badges {
  margin-top: 18px;
  background: #F0FDF4;
  border: 1px dashed rgba(0, 135, 78, 0.35);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #065F46;
  font-weight: 600;
}

.trust-item i {
  color: #00874E;
  font-size: 1rem;
}

/* ==========================================================================
   THANK YOU / ORDER RECEIVED PAGE
   ========================================================================== */
.sumika-thankyou-wrapper {
  max-width: 820px;
  margin: 0 auto;
}

.sumika-order-success-hero {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

.success-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #F0FDF4;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  margin: 0 auto 16px;
  border: 3px solid rgba(0, 135, 78, 0.2);
}

.success-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.success-desc {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.5;
  max-width: 580px;
  margin: 0 auto 24px;
}

.sumika-order-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 0.78rem;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 700;
}

.metric-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
}

.metric-val.highlight {
  color: #00874E;
}

.metric-val.price {
  color: #00874E;
  font-weight: 800;
  font-size: 1.1rem;
}

.sumika-order-full-details {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}

.sumika-order-full-details h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.sumika-thankyou-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-thankyou-continue,
.btn-thankyou-home {
  height: 46px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-thankyou-continue {
  background: #00874E;
  color: #FFFFFF !important;
}

.btn-thankyou-home {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: #334155 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE: CART & CHECKOUT
   ========================================================================== */
@media (max-width: 768px) {
  .page-main-content {
    padding: 16px 0 40px;
  }

  /* CART MOBILE */
  .sumika-cart-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sumika-cart-card-header {
    padding: 14px 16px;
  }

  .sumika-cart-table,
  .sumika-cart-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .sumika-cart-table thead {
    display: none !important;
  }

  /* Disable any WooCommerce default pseudo labels */
  .woocommerce-cart table.cart tr td::before,
  .woocommerce table.cart tr td::before,
  .sumika-cart-table tr td::before {
    display: none !important;
    content: none !important;
  }

  .sumika-cart-table tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    align-items: start !important;
    position: relative !important;
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  /* 1. THUMBNAIL (Column 1, spanning row 1 & 2) */
  .sumika-cart-table td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    position: static !important;
    padding: 0 !important;
    border: none !important;
    width: 80px !important;
    height: 80px !important;
  }

  .sumika-cart-table td.product-thumbnail .cart-thumb-wrap {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    border: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
  }

  .sumika-cart-table td.product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 2. PRODUCT NAME (Column 2, Row 1) */
  .sumika-cart-table td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    width: auto !important;
  }

  .sumika-cart-table .cart-product-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }

  /* 3. REMOVE BUTTON (Column 3, Row 1) */
  .sumika-cart-table td.product-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    position: static !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
  }

  .sumika-cart-table .btn-remove-item {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #FEE2E2 !important;
    color: #EF4444 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
  }

  /* 4. QUANTITY (Column 2, Row 2) */
  .sumika-cart-table td.product-price {
    display: none !important;
  }

  .sumika-cart-table td.product-quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  .sumika-cart-table .sumika-cart-qty-wrap {
    height: 32px !important;
    margin: 0 !important;
    display: inline-flex !important;
  }

  .sumika-cart-table .sumika-cart-qty-wrap .btn-cart-qty {
    width: 28px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }

  .sumika-cart-table .sumika-cart-qty-wrap input.qty {
    width: 36px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
  }

  /* 5. SUBTOTAL (Column 3, Row 2) */
  .sumika-cart-table td.product-subtotal {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
  }

  .sumika-cart-table .cart-line-subtotal {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #00874E !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* ACTIONS ROW (COUPON & BUTTONS) */
  .sumika-cart-table tbody tr.cart-actions-row {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 14px !important;
  }

  .sumika-cart-table tbody tr.cart-actions-row td.actions {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .cart-actions-flex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .sumika-coupon-box {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
  }

  .coupon-input {
    flex: 1 !important;
    width: auto !important;
  }

  .cart-actions-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-cart-back-shop,
  .btn-update-cart {
    width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }


  /* CHECKOUT MOBILE */
  .sumika-checkout-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .checkout-card-header {
    padding: 12px 16px;
  }

  .checkout-card-body {
    padding: 16px 14px;
  }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: 100% !important;
    float: none !important;
  }

  .sumika-order-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   TOPGIA-STYLE BLOG & THƯ VIỆN (ARCHIVE-BLOG & SINGLE-BLOG)
   ========================================================================== */

.blog-heading-section {
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  padding: 22px 0 20px;
}

.blog-catalog-section,
.single-blog-section {
  background: #F8FAFC;
  padding: 34px 0 65px;
  min-height: 60vh;
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.blog-main-content {
  min-width: 0;
}

/* BLOG POSTS GRID (3 COLUMNS LIKE TOPGIA) */
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* BLOG CARD */
.blog-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08);
}

.blog-card-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F1F5F9;
}

.blog-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  border-radius: 0 !important;
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.05);
}

/* THUMBNAIL PLACEHOLDER */
.blog-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #F0FDF4 0%, #E2E8F0 100%);
  color: #00874E;
}

.blog-thumb-placeholder i {
  font-size: 2.2rem;
  opacity: 0.85;
}

.blog-thumb-placeholder span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1E293B;
}

/* BLOG CARD BODY */
.blog-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #94A3B8;
  font-weight: 500;
  margin-bottom: 8px;
}

.blog-card-date i {
  color: #94A3B8;
  font-size: 0.82rem;
}

.blog-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 10px;
  color: #0F172A;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: #00874E;
}

.blog-card-excerpt {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* BLOG PAGINATION */
.blog-pagination-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-pagination-wrap .wp-pagenavi,
.blog-pagination-wrap .pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.blog-pagination-wrap .wp-pagenavi a,
.blog-pagination-wrap .wp-pagenavi span,
.blog-pagination-wrap .pagination a,
.blog-pagination-wrap .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.blog-pagination-wrap .wp-pagenavi span.current,
.blog-pagination-wrap .pagination span.current {
  background: #00874E;
  border-color: #00874E;
  color: #FFFFFF;
}

.blog-pagination-wrap .wp-pagenavi a:hover,
.blog-pagination-wrap .pagination a:hover {
  border-color: #00874E;
  color: #00874E;
  background: #F0FDF4;
}

/* BLOG EMPTY STATE */
.blog-empty-state {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 60px 24px;
  text-align: center;
}

.blog-empty-state .empty-icon {
  font-size: 3.5rem;
  color: #94A3B8;
  margin-bottom: 16px;
}

.blog-empty-state h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.blog-empty-state p {
  color: #64748B;
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.btn-blog-back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  background: #00874E;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.btn-blog-back-home:hover {
  background: #006E3F;
}

/* ==========================================================================
   BLOG RIGHT SIDEBAR (USER SPECIFIC: BỎ DANH MỤC THƯ VIỆN, GIỮ BÀI VIẾT MỚI)
   ========================================================================== */

.blog-sidebar {
  min-width: 0;
}

.blog-sidebar-sticky {
  position: sticky;
  top: 90px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-sidebar-widget {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-widget-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #F1F5F9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog-widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 2px;
  background: #00874E;
  border-radius: 2px;
}

.recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.recent-post-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
  transition: background 0.2s ease;
}

.recent-post-item:first-child {
  padding-top: 0;
}

.recent-post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recent-post-thumb {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F1F5F9;
  display: block;
}

.recent-post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  border-radius: 8px !important;
}

.recent-post-item:hover .recent-post-thumb img {
  transform: scale(1.06);
}

.recent-post-info {
  flex: 1;
  min-width: 0;
}

.recent-post-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1E293B;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-post-title a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.recent-post-title a:hover {
  color: #00874E;
}

.recent-post-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 500;
}

.recent-post-date i {
  font-size: 0.78rem;
}

.no-recent-text {
  color: #94A3B8;
  font-size: 0.88rem;
  margin: 0;
}

/* ==========================================================================
   SINGLE BLOG POST (CHI TIẾT BÀI VIẾT)
   ========================================================================== */

.single-blog-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 32px;
}

.single-blog-header {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid #F1F5F9;
}

.single-blog-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.single-blog-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: #64748B;
  flex-wrap: wrap;
}

.single-blog-meta-row .meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.single-blog-meta-row .meta-dot {
  color: #CBD5E1;
}

/* SINGLE BLOG ENTRY CONTENT TYPOGRAPHY & IMAGES */
.single-blog-body.entry-content {
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.85;
}

.single-blog-body.entry-content p {
  margin: 0 0 18px;
}

.single-blog-body.entry-content h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 30px 0 14px;
  line-height: 1.35;
}

.single-blog-body.entry-content h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0F172A;
  margin: 24px 0 12px;
  line-height: 1.4;
}

.single-blog-body.entry-content strong,
.single-blog-body.entry-content b {
  font-weight: 800 !important;
  color: #0F172A !important;
}

.single-blog-body.entry-content a {
  color: #00874E !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease;
}

.single-blog-body.entry-content a:hover {
  color: #006E3F !important;
  text-decoration: underline !important;
}

.single-blog-body.entry-content ul,
.single-blog-body.entry-content ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.single-blog-body.entry-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.single-blog-body.entry-content blockquote {
  background: #F8FAFC;
  border-left: 4px solid #00874E;
  margin: 22px 0;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #475569;
}

/* IMAGES & WP-CAPTION IN SINGLE BLOG (HOÀN TOÀN THEO CẤU HÌNH EDITOR) */
.single-blog-body.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

.single-blog-body.entry-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  vertical-align: middle;
}

.single-blog-body.entry-content .aligncenter,
.single-blog-body.entry-content img.aligncenter,
.single-blog-body.entry-content .wp-caption.aligncenter,
.single-blog-body.entry-content figure.aligncenter,
.single-blog-body.entry-content .wp-block-image.aligncenter {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  clear: both;
}

.single-blog-body.entry-content .aligncenter img,
.single-blog-body.entry-content figure.aligncenter img {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

.single-blog-body.entry-content .alignleft,
.single-blog-body.entry-content img.alignleft,
.single-blog-body.entry-content .wp-caption.alignleft,
.single-blog-body.entry-content figure.alignleft,
.single-blog-body.entry-content .wp-block-image.alignleft {
  float: left !important;
  margin: 6px 20px 16px 0 !important;
  display: table;
}

.single-blog-body.entry-content .alignright,
.single-blog-body.entry-content img.alignright,
.single-blog-body.entry-content .wp-caption.alignright,
.single-blog-body.entry-content figure.alignright,
.single-blog-body.entry-content .wp-block-image.alignright {
  float: right !important;
  margin: 6px 0 16px 20px !important;
  display: table;
}

.single-blog-body.entry-content .alignnone,
.single-blog-body.entry-content img.alignnone,
.single-blog-body.entry-content .wp-caption.alignnone,
.single-blog-body.entry-content figure.alignnone,
.single-blog-body.entry-content .wp-block-image.alignnone {
  float: none !important;
  margin: 12px 0 !important;
  display: inline-block;
  max-width: 100% !important;
}

.single-blog-body.entry-content .wp-caption {
  max-width: 100% !important;
  margin-bottom: 20px;
}

.single-blog-body.entry-content .wp-caption-text,
.single-blog-body.entry-content figcaption {
  font-size: 0.88rem !important;
  color: #64748B !important;
  font-style: italic !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  text-align: center;
}

/* SINGLE BLOG FOOTER (SOCIAL SHARE) */
.single-blog-footer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #F1F5F9;
}

.single-blog-share-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.share-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-buttons-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-share-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155;
  transition: all 0.2s ease;
}

.btn-share-social .share-icon-svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.btn-share-fb:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: #FFFFFF;
}

.btn-share-zalo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-share-zalo .zalo-share-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.btn-share-zalo:hover {
  border-color: #0068FF;
  color: #0068FF;
  background: #EFF6FF;
}

.btn-share-copy:hover {
  border-color: #00874E;
  color: #00874E;
  background: #F0FDF4;
}

/* RELATED POSTS SECTION */
.single-related-section {
  margin-top: 36px;
}

.related-section-header {
  margin-bottom: 20px;
}

.related-section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  position: relative;
  padding-bottom: 12px;
  border-bottom: 2px solid #F1F5F9;
}

.related-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 2px;
  background: #00874E;
  border-radius: 2px;
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR BLOG & SINGLE
   ========================================================================== */

@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr 280px;
    gap: 24px;
  }

  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 860px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .blog-sidebar-sticky {
    position: static;
  }
}

@media (max-width: 767px) {
  .single-blog-card {
    padding: 22px 18px;
    border-radius: 10px;
  }

  .single-blog-title {
    font-size: 1.38rem;
  }

  .single-blog-share-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-posts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .blog-posts-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shop-heading-title {
    font-size: 1.5rem;
  }
}

/* ABOUT PAGE RESPONSIVE */
@media (max-width: 991px) {
  .vm-expandable-desktop {
    display: none;
  }
  .vm-expandable-mobile {
    display: block;
  }
  .commit-two-col-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tech-advantages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .story-hero-title {
    font-size: 1.85rem;
  }
  .story-hero-desc {
    font-size: 0.95rem;
  }
  .partners-marquee-heading {
    font-size: 1.7rem;
  }
  .commit-section-heading {
    font-size: 1.7rem;
  }
}

@media (max-width: 575px) {
  .tech-advantages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .commit-stats-2x2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .commit-stat-box {
    padding: 18px 12px;
  }
  .stat-number {
    font-size: 1.8rem;
  }
  .marquee-group {
    gap: 36px;
    padding-right: 36px;
  }
  .marquee-logo-item img {
    max-height: 40px;
    max-width: 120px;
  }
}

/* ==========================================================================
   CONTACT PAGE (LIÊN HỆ) STYLES
   ========================================================================== */
.contact-main-section {
  padding: 60px 0 70px;
  background: #F8FAFC;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: flex-start;
}

/* LEFT COLUMN: COMPANY INFO CARD */
.contact-info-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #DCFCE7;
  color: #00874E;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.contact-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 10px;
}

.contact-card-sub {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid #F1F5F9;
}

.contact-details-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-details-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.detail-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F0FDF4;
  color: #00874E;
  border: 1px solid #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.detail-icon-box.highlight-orange {
  background: #FFF7ED;
  color: #EA580C;
  border-color: #FFEDD5;
}

.detail-text {
  flex: 1;
}

.detail-text label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #94A3B8;
  margin-bottom: 3px;
}

.detail-text span,
.detail-text a {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.5;
}

.detail-text a:hover {
  color: #00874E;
}

.phone-highlight {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #EA580C !important;
}

.detail-phones a {
  color: #00874E;
}

/* QUICK BUTTONS */
.contact-quick-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-quick-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #00874E;
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.btn-quick-call:hover {
  background: #006e3f;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.25);
}

.btn-quick-zalo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0068FF;
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.btn-quick-zalo:hover {
  background: #0053cc;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.25);
}

.zalo-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* CHANNELS TAGS */
.contact-channels-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
}

.channels-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 10px;
}

.channels-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #334155;
  transition: all 0.2s ease;
}

.channel-tag:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tag-shopee:hover { color: #EE4D2D; border-color: #EE4D2D; }
.tag-tiktok:hover { color: #000000; border-color: #000000; }
.tag-tiki:hover { color: #1A94FF; border-color: #1A94FF; }
.tag-lazada:hover { color: #0F146D; border-color: #0F146D; }

/* RIGHT COLUMN: CONTACT FORM CARD */
.contact-form-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.form-header {
  margin-bottom: 26px;
}

.form-mini-badge {
  display: inline-block;
  background: #FEF3C7;
  color: #B45309;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.form-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.3;
}

.form-subtitle {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

.sumika-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
}

.form-group .req {
  color: #EF4444;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: #94A3B8;
  font-size: 0.95rem;
  pointer-events: none;
}

.textarea-wrap .input-icon {
  top: 14px;
}

.sumika-contact-form .form-control {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #0F172A;
  background: #F8FAFC;
  transition: all 0.25s ease;
  outline: none;
}

.sumika-contact-form .form-control:focus {
  background: #FFFFFF;
  border-color: #00874E;
  box-shadow: 0 0 0 4px rgba(0, 135, 78, 0.1);
}

.sumika-contact-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.btn-submit-contact {
  margin-top: 6px;
  padding: 15px 24px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(243, 112, 33, 0.25);
  transition: all 0.3s ease;
}

.btn-submit-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(243, 112, 33, 0.35);
}

.btn-submit-contact:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.contact-form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.contact-form-alert.alert-success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.contact-form-alert.alert-error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* GOOGLE MAPS SECTION */
.contact-map-section {
  padding: 60px 0 70px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
}

.map-header {
  margin-bottom: 30px;
}

.map-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FDF4;
  color: #00874E;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.map-title {
  font-size: 2rem;
  font-weight: 800;
  color: #00874E;
  margin-bottom: 8px;
}

.map-desc {
  font-size: 0.96rem;
  color: #64748B;
  max-width: 650px;
  margin: 0 auto;
}

.map-iframe-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #E2E8F0;
}

.map-iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 480px;
}

/* RESPONSIVE QUERIES FOR CONTACT PAGE */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-info-card,
  .contact-form-card {
    padding: 28px 22px;
  }
}

@media (max-width: 640px) {
  .form-row-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-quick-buttons {
    grid-template-columns: 1fr;
  }

  .map-title {
    font-size: 1.6rem;
  }

  .map-iframe-wrapper iframe {
    height: 360px;
  }
}

/* CF7 SPECIFIC OVERRIDES */
.contact-cf7-container .wpcf7 form {
  display: flex;
  flex-direction: column;
}

.contact-cf7-container .wpcf7 p {
  margin: 0;
}

.contact-cf7-container .wpcf7-form-control-wrap {
  width: 100%;
  display: block;
  position: relative;
}

.contact-cf7-container .input-wrap .form-control {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #0F172A;
  background: #F8FAFC;
  transition: all 0.25s ease;
  outline: none;
  box-sizing: border-box;
}

.contact-cf7-container .input-wrap .form-control:focus {
  background: #FFFFFF;
  border-color: #00874E;
  box-shadow: 0 0 0 4px rgba(0, 135, 78, 0.1);
}

.contact-cf7-container .input-wrap textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.contact-cf7-container .form-submit-wrap {
  margin-top: 10px;
}

.contact-cf7-container .btn-submit-contact {
  width: 100%;
  padding: 15px 24px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 12px;
  border: none;
  background: #F37021;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(243, 112, 33, 0.25);
  transition: all 0.3s ease;
}

.contact-cf7-container .btn-submit-contact:hover {
  background: #e05e0f;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(243, 112, 33, 0.35);
}

.contact-cf7-container .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #DC2626;
  margin-top: 5px;
  display: block;
}

.contact-cf7-container .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.contact-cf7-container .wpcf7 form.sent .wpcf7-response-output {
  border-color: #22C55E !important;
  background: #F0FDF4 !important;
  color: #15803D !important;
}

.contact-cf7-container .wpcf7 form.failed .wpcf7-response-output,
.contact-cf7-container .wpcf7 form.aborted .wpcf7-response-output,
.contact-cf7-container .wpcf7 form.invalid .wpcf7-response-output,
.contact-cf7-container .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}

.contact-cf7-container .wpcf7-spinner {
  margin: 10px auto 0;
  display: block;
}

/* ==========================================================================
   SEARCH RESULTS PAGE (search.php)
   ========================================================================== */
.search-hero-section {
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border-bottom: 1px solid #E2E8F0;
  padding: 35px 0 45px;
}

.search-breadcrumbs {
  font-size: 0.88rem;
  color: #64748B;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.search-breadcrumbs a {
  color: #00874E;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.search-breadcrumbs a:hover {
  color: #F37021;
}

.search-breadcrumbs .bc-sep {
  color: #CBD5E1;
}

.search-breadcrumbs .bc-current {
  color: #475569;
  font-weight: 600;
}

.search-breadcrumbs .bc-query {
  color: #0F172A;
  font-weight: 700;
}

.search-hero-content {
  max-width: 820px;
  margin: 0 auto;
}

.search-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 135, 78, 0.1);
  color: #00874E;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.search-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 14px 0 8px;
  letter-spacing: -0.5px;
}

.search-hero-subtitle {
  font-size: 0.98rem;
  color: #64748B;
  max-width: 640px;
  margin: 0 auto 26px;
  line-height: 1.6;
}

.search-bar-form {
  max-width: 720px;
  margin: 0 auto;
}

.search-bar-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 2px solid #00874E;
  border-radius: 60px;
  padding: 6px 8px 6px 22px;
  box-shadow: 0 8px 28px rgba(0, 135, 78, 0.12);
  transition: all 0.3s ease;
  position: relative;
}

.search-bar-wrap:focus-within {
  box-shadow: 0 12px 36px rgba(0, 135, 78, 0.22);
  border-color: #006037;
}

.search-bar-icon {
  color: #00874E;
  font-size: 1.25rem;
  margin-right: 14px;
  flex-shrink: 0;
}

.search-bar-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.02rem;
  font-weight: 500;
  color: #0F172A;
  background: transparent;
  font-family: inherit;
  padding: 10px 0;
  min-width: 0;
}

.search-bar-clear {
  color: #94A3B8;
  font-size: 1.2rem;
  margin: 0 12px;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.search-bar-clear:hover {
  color: #EF4444;
}

.search-bar-submit {
  background: linear-gradient(135deg, #F37021 0%, #E05E0F 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  padding: 12px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(243, 112, 33, 0.3);
  flex-shrink: 0;
}

.search-bar-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(243, 112, 33, 0.45);
}

.search-quick-tags {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-tags-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quick-tags-label i {
  color: #F37021;
}

.quick-tags-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-tag {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  color: #334155;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quick-tag:hover {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
  transform: translateY(-1px);
}

/* RESULTS SECTION */
.search-results-section {
  padding: 45px 0 70px;
  background: #F8FAFC;
  min-height: 480px;
}

.search-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 35px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid #E2E8F0;
}

.search-meta-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.search-query-highlight {
  color: #00874E;
  font-weight: 800;
}

.search-total-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #00874E;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 600;
  margin-top: 6px;
}

.search-tabs-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #475569;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.search-tab-btn:hover {
  border-color: #00874E;
  color: #00874E;
}

.search-tab-btn.active {
  background: #00874E;
  border-color: #00874E;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 135, 78, 0.25);
}

.search-tab-btn .tab-badge {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 700;
}

.search-tab-btn.active .tab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* GROUPS */
.search-group-block {
  margin-bottom: 50px;
}

.search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 22px;
}

.group-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.group-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.group-icon.product-icon {
  background: rgba(0, 135, 78, 0.12);
  color: #00874E;
}

.group-icon.blog-icon {
  background: rgba(243, 112, 33, 0.12);
  color: #F37021;
}

.group-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.group-subtitle {
  font-size: 0.85rem;
  color: #64748B;
}

.btn-group-view-all {
  font-size: 0.88rem;
  font-weight: 700;
  color: #00874E;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-group-view-all:hover {
  color: #F37021;
  transform: translateX(3px);
}

.search-sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-label {
  font-size: 0.88rem;
  color: #64748B;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-select {
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.88rem;
  color: #1E293B;
  background: #FFFFFF;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.sort-select:focus {
  border-color: #00874E;
}

/* GRIDS */
.search-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.search-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card-readmore {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00874E;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.blog-card-readmore:hover {
  gap: 10px;
  color: #F37021;
}

/* EMPTY / NO RESULTS STATES */
.search-empty-prompt {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 60px 30px;
  border: 1.5px dashed #CBD5E1;
  max-width: 600px;
  margin: 30px auto;
}

.empty-prompt-icon {
  font-size: 3.5rem;
  color: #00874E;
  margin-bottom: 16px;
}

.empty-prompt-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px;
}

.empty-prompt-desc {
  font-size: 0.95rem;
  color: #64748B;
  margin: 0;
  line-height: 1.6;
}

.search-no-results-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 45px 40px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 840px;
  margin: 30px auto;
}

.no-results-icon-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #FEF2F2;
  color: #EF4444;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.no-results-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px;
}

.no-results-desc {
  font-size: 0.98rem;
  color: #475569;
  margin-bottom: 20px;
  line-height: 1.6;
}

.no-results-tips {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 25px;
}

.no-results-tips strong {
  font-size: 0.9rem;
  color: #1E293B;
  display: block;
  margin-bottom: 8px;
}

.no-results-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.no-results-tips li {
  font-size: 0.88rem;
  color: #64748B;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.no-results-tips li i {
  color: #00874E;
  font-size: 0.75rem;
}

.no-results-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1199px) {
  .search-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .search-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .search-blogs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .search-no-results-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 35px 25px;
  }

  .no-results-tips li {
    text-align: left;
  }

  .no-results-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .search-hero-title {
    font-size: 1.8rem;
  }

  .search-nav-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-tabs-list {
    width: 100%;
  }

  .search-tab-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}

@media (max-width: 575px) {
  .search-hero-title {
    font-size: 1.55rem;
  }

  .search-bar-wrap {
    padding: 5px 6px 5px 16px;
  }

  .search-bar-input {
    font-size: 0.92rem;
  }

  .search-bar-submit {
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  .search-bar-submit span {
    display: none;
  }

  .search-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .search-blogs-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOMEPAGE DYNAMIC BANNER SLIDER (SWIPER) - FULL WIDTH & FIXED HEIGHT
   ========================================================================== */
.hero-slider-section {
  padding: 0;
  margin: 0;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-swiper-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0F172A;
}

.hero-main-swiper {
  width: 100%;
  height: 480px;
  overflow: hidden;
  position: relative;
}

.hero-slide-item {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide-link,
.hero-slide-media {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-slide-item.swiper-slide-active .hero-slide-img {
  transform: scale(1.03);
}

/* NAVIGATION BUTTONS (PERFECTLY CLICKABLE & VISIBLE) */
.hero-swiper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #00874E;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: auto !important;
  opacity: 0.85;
}

.hero-swiper-prev {
  left: 28px;
}

.hero-swiper-next {
  right: 28px;
}

.hero-swiper-wrapper:hover .hero-swiper-btn {
  opacity: 1;
}

.hero-swiper-btn:hover {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
  box-shadow: 0 8px 24px rgba(0, 135, 78, 0.45);
  transform: translateY(-50%) scale(1.12);
}

.hero-swiper-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* PAGINATION BULLETS */
.hero-swiper-pagination {
  position: absolute;
  bottom: 22px !important;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 25;
  pointer-events: auto;
}

.hero-swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.85;
  margin: 0 !important;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-swiper-pagination .swiper-pagination-bullet:hover {
  background: #FFFFFF;
  opacity: 1;
  transform: scale(1.2);
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
  width: 36px;
  border-radius: 12px;
  background: #00874E;
  opacity: 1;
  box-shadow: 0 2px 12px rgba(0, 135, 78, 0.6);
  border: 2px solid #FFFFFF;
}

/* PROGRESS LINE */
.hero-swiper-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 26;
  overflow: hidden;
}

.hero-swiper-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F37021 0%, #00874E 100%);
  transition: width 0.1s linear;
}

/* METRICS STRIP */
.hero-metrics-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.hero-metrics-container .hero-stats {
  margin-top: 26px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #E2E8F0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 18px 24px;
}

/* RESPONSIVE HEIGHTS */
@media (min-width: 1600px) {
  .hero-main-swiper {
    height: 520px;
  }
}

@media (max-width: 1199px) {
  .hero-main-swiper {
    height: 420px;
  }

  .hero-swiper-prev {
    left: 18px;
  }

  .hero-swiper-next {
    right: 18px;
  }
}

@media (max-width: 991px) {
  .hero-main-swiper {
    height: 350px;
  }

  .hero-swiper-btn {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }

  .hero-metrics-container .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 18px;
  }
}

@media (max-width: 767px) {
  .hero-main-swiper {
    height: 250px;
  }

  .hero-swiper-btn {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .hero-swiper-prev {
    left: 10px;
  }

  .hero-swiper-next {
    right: 10px;
  }

  .hero-swiper-pagination {
    bottom: 12px !important;
  }

  .hero-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }

  .hero-swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
  }
}

/* ==========================================================================
   WHY CHOOSE US SECTION (TẠI SAO LẠI CHỌN SUMIKA) - THEME COLORS GREEN & ORANGE
   ========================================================================== */
.why-choose-us-section {
  padding: 42px 0 35px;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.why-header {
  max-width: 780px;
  margin: 0 auto 20px;
  text-align: center;
}

.why-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  border-radius: 50px;
  background: #E8F5E9;
  color: #00874E;
  border: 1px solid rgba(0, 135, 78, 0.2);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 135, 78, 0.1);
  transition: all 0.3s ease;
}

.why-badge:hover {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.25);
}

.why-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.why-title-accent {
  color: #00874E;
}

.why-subtitle {
  font-size: 1.02rem;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.why-card {
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border: 1.5px solid #DCFCE7;
  border-radius: 24px;
  padding: 42px 32px 36px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 135, 78, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
}

.why-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* SHIMMER LIGHT-SWEEP EFFECT */
.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-20deg);
  transition: left 0.8s ease;
  pointer-events: none;
}

.why-card:hover::before {
  left: 150%;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px rgba(0, 135, 78, 0.14);
  border-color: #00874E;
  background: #FFFFFF;
}

.why-card-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 12px;
  border-radius: 50px;
  background: #E8F5E9;
  color: #00874E;
  border: 1px solid rgba(0, 135, 78, 0.15);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.why-card:hover .why-card-tag {
  background: #F37021;
  border-color: #F37021;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.35);
}

.why-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #00874E 0%, #006037 100%);
  color: #FFFFFF;
  font-size: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 22px;
  box-shadow: 0 8px 22px rgba(0, 135, 78, 0.28);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .why-icon-box {
  transform: scale(1.12) rotate(6deg);
  background: linear-gradient(135deg, #00874E 0%, #F37021 100%);
  box-shadow: 0 12px 28px rgba(0, 135, 78, 0.4);
}

.why-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 14px;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.why-card:hover .why-card-title {
  color: #00874E;
}

.why-card-desc {
  font-size: 0.93rem;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .why-choose-us-section {
    padding: 20px 0;
  }

  .why-title {
    font-size: 1.95rem;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .why-card {
    padding: 34px 24px 30px;
  }
}

@media (max-width: 767px) {
  .why-choose-us-section {
    padding: 20px 0;
  }

  .why-header {
    margin-bottom: 35px;
  }

  .why-title {
    font-size: 1.65rem;
  }

  .why-subtitle {
    font-size: 0.92rem;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .why-card {
    padding: 30px 20px 26px;
  }
}

/* ==========================================================================
   HOMEPAGE PRODUCTS SHOWCASE (2-ROW SLIDER)
   ========================================================================== */
.home-products-section {
  padding: 44px 0 28px !important;
  background: #F8FAFC;
  position: relative;
}

.home-products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.home-products-header-left {
  max-width: 680px;
}

.home-products-header-left .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 50px;
  background: #E8F5E9;
  color: #00874E;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.home-products-header-left .section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px;
  line-height: 1.25;
}

.home-products-header-left .section-subtitle {
  font-size: 0.98rem;
  color: #64748B;
  margin: 0;
  line-height: 1.55;
}

.home-products-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.btn-home-all-products {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #FFFFFF;
  color: #00874E;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid #00874E;
  box-shadow: 0 2px 8px rgba(0, 135, 78, 0.08);
  transition: all 0.3s ease;
}

.btn-home-all-products:hover {
  background: #00874E;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 135, 78, 0.22);
}

.home-products-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-products-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.home-products-nav-btn:hover {
  background: #00874E;
  border-color: #00874E;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 135, 78, 0.25);
}

.home-products-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.home-products-swiper {
  overflow: hidden;
  padding: 8px 4px 36px;
  position: relative;
}

.home-products-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.product-slide-column {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 20px !important;
  box-sizing: border-box;
}

.product-slide-column .shop-product-card {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.product-slide-column .shop-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  justify-content: space-between !important;
  padding: 16px !important;
}

.product-slide-column .shop-card-cat-wrap {
  min-height: 24px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
}

.product-slide-column .shop-card-title {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 1.4 !important;
  font-size: 0.94rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 6px 0 !important;
}

.product-slide-column .shop-card-rating {
  min-height: 18px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
}

.product-slide-column .shop-card-price-row {
  margin-top: auto !important;
  min-height: 48px !important;
  padding: 8px 0 !important;
  border-top: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
}

.product-slide-column .shop-card-actions {
  margin-top: 6px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 6px !important;
}

.product-slide-column .btn-shop-view,
.product-slide-column .btn-shop-add-cart {
  height: 38px !important;
  font-size: 0.78rem !important;
  padding: 0 4px !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-products-pagination {
  position: relative !important;
  bottom: 0 !important;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.home-products-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #CBD5E1;
  opacity: 1;
  border-radius: 50px;
  transition: all 0.3s ease;
  margin: 0 !important;
}

.home-products-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 6px;
  background: #00874E;
}

/* RESPONSIVE IPAD & TABLET (768px - 991px) */
@media (max-width: 991px) {
  .home-products-section {
    padding: 35px 0 45px;
  }

  .home-products-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
  }

  .home-products-header-left {
    flex: 1;
    min-width: 0;
  }

  .home-products-header-left .section-title {
    font-size: 1.55rem;
    margin: 0;
  }

  .home-products-header-right {
    flex-shrink: 0;
  }

  .product-slide-column {
    gap: 14px !important;
  }

  .product-slide-column .shop-card-body {
    padding: 10px 10px 12px !important;
  }

  .product-slide-column .shop-card-title {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin-bottom: 4px !important;
  }

  .product-slide-column .shop-card-price-row {
    min-height: 42px !important;
    padding: 6px 0 !important;
  }

  .product-slide-column .shop-price-saving {
    width: auto !important;
    font-size: 0.65rem !important;
    padding: 2px 5px !important;
  }

  .product-slide-column .shop-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 5px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 6px !important;
  }

  .product-slide-column .btn-shop-view,
  .product-slide-column .btn-shop-add-cart {
    height: 34px !important;
    font-size: 0.74rem !important;
    padding: 0 4px !important;
  }
}

/* RESPONSIVE MOBILE (< 768px) */
@media (max-width: 767px) {
  .home-products-section {
    padding: 25px 0 35px;
  }

  .home-products-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .home-products-header-left {
    flex: 1;
    min-width: 0;
  }

  .home-products-header-left .section-tag {
    font-size: 0.68rem;
    padding: 2px 8px;
    margin-bottom: 2px;
  }

  .home-products-header-left .section-title {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.25;
  }

  .home-products-header-right {
    flex-shrink: 0;
  }

  .btn-home-all-products {
    font-size: 0.76rem;
    padding: 5px 10px;
    border-radius: 30px;
    gap: 4px;
    white-space: nowrap;
  }

  .product-slide-column {
    gap: 10px !important;
  }

  .product-slide-column .shop-product-card {
    border-radius: 12px !important;
  }

  .product-slide-column .shop-badge-discount {
    top: 6px !important;
    right: 6px !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  .product-slide-column .shop-card-body {
    padding: 8px 8px 10px !important;
  }

  .product-slide-column .shop-card-cat-wrap {
    min-height: 18px !important;
    margin-bottom: 4px !important;
  }

  .product-slide-column .shop-card-cat-badge {
    font-size: 0.64rem !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
  }

  .product-slide-column .shop-card-title {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 0 4px 0 !important;
  }

  .product-slide-column .shop-card-rating {
    min-height: 14px !important;
    margin-bottom: 4px !important;
    gap: 3px !important;
  }

  .product-slide-column .shop-card-stars {
    font-size: 0.65rem !important;
  }

  .product-slide-column .shop-card-score {
    font-size: 0.68rem !important;
  }

  .product-slide-column .shop-card-price-row {
    min-height: 38px !important;
    padding: 4px 0 6px !important;
    gap: 2px 4px !important;
  }

  .product-slide-column .shop-price-current {
    font-size: 0.95rem !important;
  }

  .product-slide-column .shop-price-old {
    font-size: 0.7rem !important;
  }

  .product-slide-column .shop-price-saving {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
  }

  .product-slide-column .shop-card-actions {
    margin-top: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    gap: 6px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .product-slide-column .btn-shop-view,
  .product-slide-column .btn-shop-add-cart {
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .product-slide-column .btn-shop-view i,
  .product-slide-column .btn-shop-add-cart i {
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  .product-slide-column .btn-shop-view span,
  .product-slide-column .btn-shop-add-cart span {
    display: none !important;
  }

  .home-products-swiper {
    padding: 4px 0 24px !important;
  }

  .home-products-pagination {
    margin-top: 10px !important;
  }
}

/* ==========================================================================
   SECTION REVIEWS (ĐÁNH GIÁ TỪ KHÁCH HÀNG)
   ========================================================================== */
.home-reviews-section {
  background-color: #EEF5FB;
  padding: 70px 0 76px;
  position: relative;
  overflow: hidden;
}

.home-reviews-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

/* Left Column */
.home-reviews-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 10;
  background: transparent;
}

.reviews-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.reviews-avatar-stack {
  display: flex;
  align-items: center;
}

.reviews-avatar-stack img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.reviews-avatar-stack img:first-child {
  margin-left: 0;
}

.reviews-avatar-stack img:hover {
  transform: translateY(-2px) scale(1.1);
  z-index: 5;
}

.reviews-trust-text {
  font-size: 0.85rem;
  color: #1E3A8A;
  font-weight: 600;
  line-height: 1.3;
}

.reviews-trust-text strong {
  font-weight: 800;
  color: #1E3A8A;
}

.home-reviews-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #1E3A8A;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.home-reviews-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 340px;
}

.home-reviews-cta-wrap {
  margin-bottom: 32px;
}

.btn-home-reviews-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #234E9B;
  color: #FFFFFF !important;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(35, 78, 155, 0.25);
  text-decoration: none;
}

.btn-home-reviews-cta:hover {
  background-color: #00874E;
  box-shadow: 0 8px 22px rgba(0, 135, 78, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF !important;
}

.btn-home-reviews-cta i {
  font-size: 0.88rem;
  transition: transform 0.2s ease;
}

.btn-home-reviews-cta:hover i {
  transform: translateX(4px);
}

/* Slider Controls */
.home-reviews-nav-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.home-reviews-progress-bar {
  width: 72px;
  height: 4px;
  background-color: #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.home-reviews-progress-fill {
  height: 100%;
  width: 33%;
  background-color: #234E9B;
  border-radius: 4px;
  transition: width 0.35s ease, left 0.35s ease;
}

.home-reviews-nav-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-reviews-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #CBD5E1;
  background-color: #FFFFFF;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.home-reviews-nav-btn:hover {
  background-color: #00874E;
  border-color: #00874E;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 135, 78, 0.2);
  transform: translateY(-1px);
}

.home-reviews-nav-btn:active {
  transform: translateY(0);
}

.home-reviews-nav-btn.swiper-button-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Right Column: Swiper & Cards */
.home-reviews-slider-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden; /* Cắt gọn gàng các slide khi trượt sang trái, tuyệt đối không tràn qua cột trái */
  position: relative;
}

.home-reviews-swiper {
  overflow: hidden; /* Cắt tràn ngang */
  padding: 10px 4px 20px;
}

.review-slide-item {
  height: auto;
  transition: opacity 0.3s ease;
}

.review-card {
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: 195px 1fr;
  gap: 20px;
  align-items: center;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(226, 232, 240, 0.8);
  height: 100%;
  min-height: 245px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
  border-color: #DCFCE7;
}

.review-card-media {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background-color: #F8FAFC;
  flex-shrink: 0;
}

.review-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.review-card:hover .review-card-media img {
  transform: scale(1.05);
}

.review-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px 6px 0;
}

.review-card-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #F1F5F9;
}

.review-author-info {
  display: flex;
  flex-direction: column;
}

.review-author-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1E3A8A;
  margin: 0 0 2px;
  line-height: 1.3;
}

.review-author-source {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 500;
}

.review-card-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #F59E0B;
  font-size: 0.88rem;
  margin-bottom: 12px;
}

.review-card-stars i {
  color: #E2E8F0;
}

.review-card-stars i.active {
  color: #F59E0B;
}

.review-card-quote {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  font-style: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Breakpoints */
@media (max-width: 1199px) {
  .home-reviews-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
  }
  .home-reviews-title {
    font-size: 2rem;
  }
  .review-card {
    grid-template-columns: 165px 1fr;
    gap: 16px;
    padding: 14px;
  }
  .review-card-media {
    height: 200px;
  }
}

@media (max-width: 991px) {
  .home-reviews-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-reviews-intro {
    max-width: 600px;
  }
  .home-reviews-desc {
    max-width: 100%;
  }
  .home-reviews-slider-wrap {
    overflow: hidden;
  }
  .home-reviews-swiper {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .home-reviews-section {
    padding: 45px 0 55px;
  }
  .home-reviews-title {
    font-size: 1.65rem;
  }
  .home-reviews-desc {
    font-size: 0.88rem;
    margin-bottom: 20px;
  }
  .btn-home-reviews-cta {
    font-size: 0.84rem;
    padding: 11px 20px;
    width: 100%;
    justify-content: center;
  }
  .review-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    min-height: auto;
  }
  .review-card-media {
    height: 180px;
  }
  .review-card-quote {
    font-size: 0.84rem;
    -webkit-line-clamp: 5;
  }
}

/* ==========================================================================
   1. TRUST & COMMITMENT BAR (CHÍNH SÁCH BÁN HÀNG & CAM KẾT)
   ========================================================================== */
.home-trust-bar-section {
  padding: 28px 0 14px;
  background: #FFFFFF;
  position: relative;
  z-index: 10;
  margin-top: 0;
}

.home-trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border-right: 1px solid #F1F5F9;
  transition: transform 0.25s ease;
}

.trust-bar-item:last-child {
  border-right: none;
}

.trust-bar-item:hover {
  transform: translateY(-2px);
}

.trust-bar-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F0FDF4;
  color: #00874E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  border: 1px solid #DCFCE7;
  transition: all 0.3s ease;
}

.trust-bar-item:hover .trust-bar-icon {
  background: #00874E;
  color: #FFFFFF;
  border-color: #00874E;
}

.trust-bar-info {
  display: flex;
  flex-direction: column;
}

.trust-bar-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 3px;
  line-height: 1.3;
}

.trust-bar-desc {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   2. HOMEPAGE FAQ SECTION (CÂU HỎI THƯỜNG GẶP)
   ========================================================================== */
.home-faq-section {
  padding: 80px 0 85px;
  background: #FFFFFF;
}

.home-faq-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.faq-item.active {
  background: #FFFFFF;
  border-color: #86EFAC;
  box-shadow: 0 10px 24px rgba(0, 135, 78, 0.08);
}

.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease;
}

.faq-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.45;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.faq-q-num {
  color: #00874E;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.faq-item.active .faq-title {
  color: #00874E;
}

.faq-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-item.active .faq-icon {
  background: #DCFCE7;
  color: #00874E;
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-content-inner {
  padding: 0 24px 22px;
  border-top: 1px dashed #E2E8F0;
  padding-top: 16px;
  margin-top: -4px;
}

.faq-content-inner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #475569;
}

.faq-content-inner strong {
  color: #0F172A;
}

/* ==========================================================================
   3. BOTTOM PRE-FOOTER CTA SECTION (CHỐT ĐƠN COMBO TRẢI NGHIỆM)
   ========================================================================== */
.home-bottom-cta-section {
  padding: 30px 0 70px;
  background: #FFFFFF;
}

.home-bottom-cta-box {
  background: linear-gradient(135deg, #00874E 0%, #005a30 55%, #052e18 100%);
  border-radius: 28px;
  padding: 60px 48px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 90, 48, 0.25);
  text-align: center;
}

.cta-decor-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-circle-1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
  top: -180px;
  right: -100px;
}

.cta-circle-2 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(243, 112, 33, 0.2) 0%, transparent 70%);
  bottom: -120px;
  left: -80px;
}

.home-bottom-cta-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.cta-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(243, 112, 33, 0.25);
  border: 1px solid rgba(243, 112, 33, 0.55);
  color: #FED7AA;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.home-bottom-cta-title {
  font-size: 2.3rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.home-bottom-cta-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 34px;
  max-width: 660px;
}

.home-bottom-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn-cta-primary {
  background: #F37021;
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 0.96rem;
  padding: 14px 30px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(243, 112, 33, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-cta-primary:hover {
  background: #d85c12;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(243, 112, 33, 0.45);
  color: #FFFFFF !important;
}

.btn-cta-hotline {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 0.96rem;
  padding: 14px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-cta-hotline:hover {
  background: #FFFFFF;
  color: #00874E !important;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.home-bottom-cta-perks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.home-bottom-cta-perks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-bottom-cta-perks i {
  color: #86EFAC;
}

/* Responsive Queries for New Sections */
@media (max-width: 1024px) {
  .home-trust-bar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .trust-bar-item:nth-child(2) {
    border-right: none;
  }
  .home-bottom-cta-title {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .home-trust-bar-section {
    margin-top: 0;
    padding: 10px 0 16px;
  }
  .home-trust-bar-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
  }
  .trust-bar-item {
    border-right: none;
    border-bottom: 1px solid #F1F5F9;
    padding: 6px 4px 12px;
  }
  .trust-bar-item:last-child {
    border-bottom: none;
  }
  .home-faq-section {
    padding: 50px 0 55px;
  }
  .faq-header {
    padding: 16px 18px;
  }
  .faq-title {
    font-size: 0.94rem;
  }
  .faq-content-inner {
    padding: 0 18px 18px;
  }
  .home-bottom-cta-box {
    padding: 38px 20px;
    border-radius: 20px;
  }
  .home-bottom-cta-title {
    font-size: 1.55rem;
  }
  .home-bottom-cta-desc {
    font-size: 0.9rem;
  }
  .btn-cta-primary,
  .btn-cta-hotline {
    width: 100%;
    justify-content: center;
  }
  .home-bottom-cta-perks {
    gap: 14px;
    font-size: 0.8rem;
  }
}