/*
Theme Name:   Semeco Child
Theme URI:    https://semeco.vn
Description:  Flatsome Child Theme cho Semeco Việt Nam - Giải pháp Phòng Sạch Toàn Diện
Author:       Semeco Vietnam
Author URI:   https://semeco.vn
Template:     flatsome
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         flatsome, child-theme, cleanroom, semeco
Text Domain:  semeco-child
*/

/* ============================================================
   SEMECO CHILD THEME v1.1.0
   Font: Mulish + Barlow Condensed
   Flatsome 3.15.3 — Mobile First Responsive
   ============================================================ */

/* ---- GOOGLE FONTS ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700&display=swap');

/* ---- DESIGN TOKENS ---------------------------------------- */
:root {
  --sc-navy:    #0a1628;
  --sc-navy2:   #0f2040;
  --sc-blue:    #1560bd;
  --sc-blue2:   #1a7ae0;
  --sc-teal:    #00c2a0;
  --sc-teal2:   #00e8bf;
  --sc-light:   #f5f8ff;
  --sc-gray:    #8898aa;
  --sc-text:    #1e2d40;
  --sc-border:  rgba(21,96,189,0.15);
  --sc-white:   #ffffff;
  --sc-font:    'Mulish', sans-serif;
  --sc-display: 'Barlow Condensed', sans-serif;
}

/* ============================================================
   BASE TYPOGRAPHY — Mulish toàn site
   ============================================================ */
*,
body,
p, a, li, td, th, label, input, textarea, select, button,
.nav-top-link, .widget, .footer-widget {
  font-family: var(--sc-font) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700 !important;
}

/* Display headings dùng Barlow Condensed */
.sc-section-title,
.sc-hero h1,
.sc-hero h2,
.sc-stat-num,
.sc-metric-num,
.sc-why-num {
}

body {
  color: var(--sc-text);
  background: var(--sc-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TOP BAR
   ============================================================ */
#top-bar {
  background: var(--sc-navy) !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 12px !important;
}
#top-bar a { color: rgba(255,255,255,0.7) !important; }
#top-bar a:hover { color: var(--sc-teal) !important; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#header {
  background: var(--sc-white) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Logo */
#logo img { max-height: 52px !important; width: auto !important; }

/* Desktop nav links */
.header-nav .nav-top-link,
#main-nav > ul > li > a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
  padding: 8px 13px !important;
  border-radius: 6px !important;
  transition: all .2s !important;
  letter-spacing: 0.1px !important;
}
#main-nav > ul > li > a:hover,
#main-nav > ul > li.current-menu-item > a {
  background: var(--sc-light) !important;
  color: var(--sc-blue) !important;
}

/* Dropdown */
.nav-dropdown {
  border-radius: 10px !important;
  border: 1px solid var(--sc-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
  min-width: 200px !important;
}
.nav-dropdown a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-text) !important;
  padding: 9px 16px !important;
}
.nav-dropdown a:hover { color: var(--sc-blue) !important; background: var(--sc-light) !important; }

/* Mobile sidebar */
.mobile-sidebar .nav-sidebar a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sc-navy) !important;
  padding: 12px 16px !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button, .ux-button, input[type="submit"], button[type="submit"] {
  font-family: var(--sc-font) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all .2s !important;
  letter-spacing: 0.2px !important;
}
.button.teal {
  background: var(--sc-teal) !important;
  color: var(--sc-navy) !important;
}
.button.teal:hover { background: var(--sc-teal2) !important; transform: translateY(-1px) !important; }
.button.outline-white {
  background: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
}
.button.outline-white:hover { border-color: rgba(255,255,255,.8) !important; }
.button.primary, .ux-button.primary {
  background: var(--sc-blue) !important;
  color: white !important;
  border: none !important;
}
.button.primary:hover { background: var(--sc-blue2) !important; }

/* ============================================================
   SECTION LABELS & TITLES
   ============================================================ */
.sc-section-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--sc-blue);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.sc-section-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--sc-navy);
  line-height: 1.15;
  margin-bottom: 12px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.sc-hero {
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-navy2) 55%, #0a2550 100%) !important;
  position: relative;
  overflow: hidden;
}
.sc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.4) 39px, rgba(255,255,255,.4) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.4) 39px, rgba(255,255,255,.4) 40px);
  pointer-events: none;
}

.sc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,194,160,0.15);
  border: 1px solid rgba(0,194,160,0.4);
  color: var(--sc-teal2);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.sc-pulse-dot {
  width: 7px; height: 7px;
  background: var(--sc-teal);
  border-radius: 50%;
  display: inline-block;
  animation: sc-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes sc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.sc-hero h1 {
  color: white !important;
  font-family: var(--sc-display) !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.1 !important;
  margin-bottom: 18px !important;
}
.sc-hero h1 em { color: var(--sc-teal2) !important; font-style: normal !important; }
.sc-hero p {
  color: rgba(255,255,255,.75) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Hero stats */
.sc-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
}
.sc-stat-num {
  font-family: var(--sc-display) !important;
  font-size: 34px;
  font-weight: 700;
  color: var(--sc-teal2);
  display: block;
  line-height: 1;
}
.sc-stat-label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500; }

/* Hero visual cards */
.sc-hero .col.medium-6:last-child {
  position: relative;
  z-index: 1;
}

/* ============================================================
   BRANDS STRIP
   ============================================================ */
.sc-brands-strip {
  background: var(--sc-white);
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  padding: 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-brand-pill {
  background: var(--sc-light);
  border: 1px solid var(--sc-border);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sc-text);
  letter-spacing: 0.8px;
  white-space: nowrap;
  display: inline-block;
}

/* ============================================================
   SERVICES GRID — 3 cột × 2 hàng
   ============================================================ */
#dich-vu .row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#dich-vu .row::after { display: none !important; }
#dich-vu .row > .col,
#dich-vu .row > [class*="col"] {
  width: 100% !important; max-width: 100% !important;
  float: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important;
}

/* Service card */
.sc-service-card {
  background: var(--sc-white);
  border: 1.5px solid var(--sc-border);
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.sc-service-card:hover {
  border-color: var(--sc-blue);
  box-shadow: 0 8px 28px rgba(21,96,189,0.11);
  transform: translateY(-3px);
}
.sc-service-card.featured {
  background: var(--sc-navy);
  border-color: transparent;
}
.sc-service-card .sc-svc-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--sc-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.sc-service-card .sc-svc-icon img.emoji { width: 24px !important; height: 24px !important; margin: 0 !important; }
.sc-service-card.featured .sc-svc-icon { background: rgba(0,194,160,0.15); }
.sc-service-card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: var(--sc-navy) !important;
}
.sc-service-card.featured h3 { color: white !important; }
.sc-service-card p { font-size: 13px !important; color: var(--sc-gray) !important; line-height: 1.65; flex: 1; }
.sc-service-card.featured p { color: rgba(255,255,255,.6) !important; }
.sc-svc-link { font-size: 12.5px; font-weight: 700; color: var(--sc-blue); margin-top: 16px; display: block; }
.sc-service-card.featured .sc-svc-link { color: var(--sc-teal); }

/* ============================================================
   WOOCOMMERCE PRODUCT GRID
   HTML: .products.row.row-small > .product-small.col >
         .col-inner > .product-small.box > .box-image + .box-text
   ============================================================ */

/* Grid */
#san-pham .products.row.row-small {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#san-pham .products.row.row-small::after { display: none !important; }

/* Col */
#san-pham .products.row.row-small > .col {
  width: 100% !important; max-width: 100% !important;
  float: none !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important;
}

/* col-inner + box stretch */
#san-pham .col-inner,
#san-pham .product-small.box {
  width: 100% !important; height: 100% !important;
  display: flex !important; flex-direction: column !important;
}

/* Card */
#san-pham .product-small.box {
  background: var(--sc-white) !important;
  border: 1.5px solid rgba(21,96,189,0.15) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  box-sizing: border-box !important;
}
#san-pham .product-small.col:hover .product-small.box {
  border-color: var(--sc-blue) !important;
  box-shadow: 0 8px 28px rgba(21,96,189,0.13) !important;
  transform: translateY(-3px) !important;
}

/* Image area */
#san-pham .box-image {
  background: var(--sc-light) !important;
  border-bottom: 1.5px solid rgba(21,96,189,0.1) !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 5 / 6 !important;
  flex-shrink: 0 !important;
}
#san-pham .box-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: transform .35s ease !important;
}
#san-pham .product-small.col:hover .box-image > .image-fade_in_back > a > img:first-child {
  transform: scale(1.04) !important;
}
#san-pham .product-small.col:hover .box-image { border-color: rgba(21,96,189,.28) !important; }

/* Quick view overlay */
#san-pham .image-tools.grid-tools {
  background: linear-gradient(0deg, rgba(10,22,40,.55) 0%, transparent 100%) !important;
  padding: 14px 10px 10px !important;
  display: flex !important; align-items: flex-end !important; justify-content: center !important;
}
#san-pham .quick-view {
  background: white !important; color: var(--sc-navy) !important;
  font-size: 11px !important; font-weight: 800 !important;
  padding: 5px 14px !important; border-radius: 100px !important;
  text-decoration: none !important; letter-spacing: 0.3px !important;
  font-family: var(--sc-font) !important;
}
#san-pham .quick-view:hover { background: var(--sc-teal) !important; }

/* Text area */
#san-pham .box-text.box-text-products {
  padding: 13px 14px 16px !important;
  flex: 1 !important; display: flex !important;
  flex-direction: column !important; justify-content: space-between !important;
}

/* Category pill */
#san-pham .product-cat.category {
  font-size: 9.5px !important; font-weight: 800 !important;
  color: var(--sc-blue) !important; text-transform: uppercase !important;
  letter-spacing: 1px !important; margin: 0 0 7px !important;
  opacity: 1 !important; line-height: 1.3 !important;
  display: inline-block !important;
  background: rgba(21,96,189,0.07) !important;
  padding: 3px 8px !important; border-radius: 4px !important;
}

/* Product name */
#san-pham .woocommerce-loop-product__title,
#san-pham p.name.product-title {
  font-size: 12.5px !important; font-weight: 700 !important;
  color: var(--sc-navy) !important; line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#san-pham .woocommerce-LoopProduct-link {
  color: var(--sc-navy) !important; text-decoration: none !important;
}
#san-pham .woocommerce-LoopProduct-link:hover { color: var(--sc-blue) !important; }

/* Price */
#san-pham .price-wrapper {
  margin-top: 9px !important; padding-top: 9px !important;
}
#san-pham .price {
  color: var(--sc-blue) !important; font-weight: 800 !important; font-size: 13px !important;
}

/* Add to cart */
#san-pham .button.product_type_simple,
#san-pham .add_to_cart_button {
  display: block !important; width: 100% !important;
  background: var(--sc-blue) !important; color: white !important;
  border: none !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important;
  padding: 8px 12px !important; text-align: center !important;
  margin-top: 9px !important; cursor: pointer !important;
  font-family: var(--sc-font) !important;
  transition: background .2s !important;
}
#san-pham .button.product_type_simple:hover { background: var(--sc-blue2) !important; }

/* ============================================================
   WHY US SECTION
   ============================================================ */
.sc-why-section { background: var(--sc-navy); color: white; }
.sc-why-num {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 10px;
  background: rgba(0,194,160,0.12);
  border: 1px solid rgba(0,194,160,0.3);
  color: var(--sc-teal);
  font-family: var(--sc-display) !important;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-why-metric-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.sc-metric-num {
  font-family: var(--sc-display) !important;
  font-size: 30px; font-weight: 700; color: var(--sc-teal2); line-height: 1;
}
.sc-metric-label { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; font-weight: 500; }

/* ============================================================
   INDUSTRY CARDS — 3 cột × 2 hàng
   ============================================================ */
.row.medium-columns-3.small-columns-2::after { display: none !important; }
.row.medium-columns-3.small-columns-2 > .col {
  width: 100% !important; max-width: 100% !important;
  float: none !important; padding: 0 !important; margin: 0 !important;
}
.sc-ind-card {
  border: 1.5px solid var(--sc-border);
  border-radius: 12px; padding: 18px 16px;
  background: var(--sc-white);
  transition: border-color .22s, box-shadow .22s, transform .22s;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none !important;
  width: 100%; box-sizing: border-box; height: 100%;
}
.sc-ind-card:hover {
  border-color: var(--sc-teal);
  box-shadow: 0 6px 20px rgba(0,194,160,0.12);
  transform: translateY(-2px);
}
.sc-ind-icon {
  font-size: 24px; width: 48px; height: 48px; min-width: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-light); border-radius: 10px; flex-shrink: 0;
}
.sc-ind-icon img.emoji { width: 26px !important; height: 26px !important; margin: 0 !important; }
.sc-ind-card h4 {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--sc-navy) !important; margin: 0 0 3px !important;
}
.sc-ind-card p { font-size: 11.5px !important; color: var(--sc-gray) !important; margin: 0 !important; line-height: 1.5 !important; }

/* ============================================================
   CTA / CONTACT SECTION
   ============================================================ */
.sc-cta-section {
  background: linear-gradient(135deg, var(--sc-blue) 0%, #0a4fa3 100%);
}
.sc-contact-form-box {
  background: white; border-radius: 14px; padding: 26px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.sc-contact-form-box h3 {
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--sc-navy) !important; margin-bottom: 18px !important;
}
.sc-contact-form-box .wpcf7-form input:not([type="submit"]),
.sc-contact-form-box .wpcf7-form textarea,
.sc-contact-form-box .wpcf7-form select,
#semeco-contact-form input,
#semeco-contact-form textarea {
  width: 100% !important;
  padding: 10px 13px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: var(--sc-font) !important;
  color: var(--sc-navy) !important;
  outline: none !important;
  transition: border .2s !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}
.sc-contact-form-box .wpcf7-form input:focus,
.sc-contact-form-box .wpcf7-form textarea:focus,
#semeco-contact-form input:focus,
#semeco-contact-form textarea:focus { border-color: var(--sc-blue) !important; }
.sc-contact-form-box .wpcf7-form input[type="submit"],
#semeco-contact-form button[type="submit"] {
  background: var(--sc-blue) !important; color: white !important;
  border: none !important; font-weight: 700 !important;
  border-radius: 8px !important; padding: 12px !important;
  width: 100% !important; cursor: pointer !important;
  font-size: 14px !important; font-family: var(--sc-font) !important;
  transition: background .2s !important;
}
.sc-contact-form-box .wpcf7-form input[type="submit"]:hover { background: var(--sc-blue2) !important; }
.sc-form-message.success { color: #0a6e3f; background: #edfff5; border-radius: 6px; padding: 8px 12px; }
.sc-form-message.error   { color: #a32d2d; background: #fff0f0; border-radius: 6px; padding: 8px 12px; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { background: var(--sc-navy) !important; }
#footer, #footer p, #footer a, #footer li {
  color: rgba(255,255,255,0.58) !important;
  font-size: 13px !important;
  font-family: var(--sc-font) !important;
}
#footer h4, #footer .widget-title {
  font-size: 12px !important; font-weight: 800 !important;
  color: white !important; text-transform: uppercase !important;
  letter-spacing: 1.2px !important; margin-bottom: 14px !important;
  font-family: var(--sc-font) !important;
}
#footer a:hover { color: var(--sc-teal) !important; }
#footer-bar, .absolute-footer {
  background: rgba(0,0,0,0.22) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 12px !important;
}
.absolute-footer .copyright-footer { color: rgba(255,255,255,0.45) !important; }

/* ============================================================
   FLATSOME UX OVERRIDES
   ============================================================ */
.ux-counter .ux-counter-number { color: var(--sc-teal2) !important; }
.breadcrumbs { font-size: 12px !important; color: var(--sc-gray) !important; }
.breadcrumbs a { color: var(--sc-blue) !important; }
.woocommerce div.product .product_title {
  font-family: var(--sc-font) !important; color: var(--sc-navy) !important;
}
.woocommerce div.product .price { color: var(--sc-blue) !important; font-weight: 800 !important; }

/* ============================================================
   UTILITY
   ============================================================ */
.sc-text-navy  { color: var(--sc-navy)  !important; }
.sc-text-blue  { color: var(--sc-blue)  !important; }
.sc-text-teal  { color: var(--sc-teal)  !important; }
.sc-text-white { color: white           !important; }
.sc-text-muted { color: var(--sc-gray)  !important; }
.sc-bg-navy    { background: var(--sc-navy)  !important; }
.sc-bg-light   { background: var(--sc-light) !important; }
.sc-border     { border: 1px solid var(--sc-border) !important; }
.sc-shadow     { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }
.sc-rounded    { border-radius: 12px !important; }
.sc-rounded-lg { border-radius: 14px !important; }

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* ── Tablet đứng & dưới (≤ 1024px) ─────────────────────── */
@media (max-width: 1024px) {
  #san-pham .products.row.row-small {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ── Tablet (≤ 849px) ───────────────────────────────────── */
@media (max-width: 849px) {

  /* Hero: stack 2 cols thành 1 col */
  .sc-hero .container > .row { flex-direction: column !important; }
  .sc-hero .col.medium-6 {
    width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .sc-hero h1 { font-size: clamp(30px, 6vw, 40px) !important; }
  .sc-hero p { font-size: 14px !important; }
  .sc-hero-badge { font-size: 11px !important; }

  /* Hero visual cards: ẩn trên mobile nhỏ, show trên tablet */
  .sc-hero .col.medium-6:last-child { margin-top: 24px !important; }

  /* Hero stats: co lại */
  .sc-hero-stats { gap: 20px; margin-top: 24px; padding-top: 20px; }
  .sc-stat-num { font-size: 28px; }

  /* Services: 2 cột */
  #dich-vu .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Products: 2 cột */
  #san-pham .products.row.row-small {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Industries: 2 cột */
  .row.medium-columns-3.small-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Why section: stack */
  .sc-why-section .row { flex-direction: column !important; }
  .sc-why-section .col.medium-6 {
    width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .sc-why-section .col.medium-6:last-child { margin-top: 28px !important; }

  /* CTA section: stack */
  .sc-cta-section .row { flex-direction: column !important; }
  .sc-cta-section .col.medium-6 {
    width: 100% !important; max-width: 100% !important;
  }
  .sc-contact-form-box { margin-top: 28px !important; }

  /* Why metrics: 2 cột */
  .sc-why-section .col.medium-6:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding-left: 0 !important;
  }
  .sc-why-metric-card { margin-bottom: 0 !important; }
}

/* ── Mobile (≤ 600px) ───────────────────────────────────── */
@media (max-width: 600px) {

  /* Brands strip: scroll ngang */
  .sc-brands-strip .container > div:last-child { flex-wrap: nowrap !important; overflow-x: auto !important; }

  /* Services: 1 cột */
  #dich-vu .row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sc-service-card { padding: 20px 18px !important; }

  /* Products: 2 cột (giữ 2 trên mobile) */
  #san-pham .products.row.row-small {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #san-pham .box-text.box-text-products { padding: 10px 11px 13px !important; }
  #san-pham .woocommerce-loop-product__title,
  #san-pham p.name.product-title { font-size: 11.5px !important; }
  #san-pham .product-cat.category { font-size: 9px !important; }

  /* Industries: 1 cột */
  .row.medium-columns-3.small-columns-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Section title nhỏ lại */
  .sc-section-title { font-size: 24px !important; }
  .sc-hero h1 { font-size: clamp(26px, 7vw, 34px) !important; }

  /* Hero visual cards: ẩn trên mobile nhỏ */
  .sc-hero .col.medium-6:last-child { display: none !important; }

  /* Buttons hero: full width */
  .sc-hero .col.medium-6:first-child > div[style*="flex"] {
    flex-direction: column !important;
  }
  .sc-hero .button { width: 100% !important; text-align: center !important; }

  /* Why metrics: 1 cột */
  .sc-why-section .col.medium-6:last-child {
    grid-template-columns: 1fr !important;
  }
  .sc-why-metric-card { padding: 14px !important; }
  .sc-metric-num { font-size: 26px !important; }

  /* Contact form */
  .sc-contact-form-box { padding: 20px 16px !important; }

  /* CTA title */
  .sc-cta-section h2 { font-size: clamp(24px, 6vw, 34px) !important; }

  /* Section padding nhỏ lại */
  #dich-vu, #san-pham, .sc-why-section,
  section[style*="clamp(56px"] { padding: 48px 0 !important; }
}

/* ── Mobile nhỏ (≤ 380px) ───────────────────────────────── */
@media (max-width: 380px) {
  #san-pham .products.row.row-small {
    grid-template-columns: 1fr !important;
  }
  .sc-hero h1 { font-size: 26px !important; }
  .sc-hero-stats { gap: 14px; }
  .sc-stat-num { font-size: 24px; }
  .sc-contact-form-box { padding: 16px !important; }
}

/* ============================================================
   TRANG DANH MỤC SẢN PHẨM (archive / category)
   HTML: .category-page-row > .col.large-3 (sidebar)
                             + .col.large-9 (main)
   Product grid: .products.row.row-small.large-columns-3
   ============================================================ */

/* ── Page title bar ──────────────────────────────────────── */
.shop-page-title.category-page-title {
  background: var(--sc-white) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 14px 0 !important;
  margin-bottom: 0 !important;
}
.shop-page-title .page-title-inner {
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Breadcrumb */
.woocommerce-breadcrumb.breadcrumbs {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sc-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce-breadcrumb.breadcrumbs a {
  color: var(--sc-blue) !important;
  font-weight: 600 !important;
}
.woocommerce-breadcrumb.breadcrumbs .divider {
  color: var(--sc-border) !important;
  margin: 0 6px !important;
}

/* Sort select */
.woocommerce-ordering select.orderby {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
  border: 1.5px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 7px 32px 7px 12px !important;
  background-color: var(--sc-white) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  appearance: auto !important;
}
.woocommerce-ordering select.orderby:focus {
  border-color: var(--sc-blue) !important;
}

/* Result count */
.woocommerce-result-count {
  font-size: 12px !important;
  color: var(--sc-gray) !important;
  font-weight: 500 !important;
}

/* ── Category page layout ────────────────────────────────── */
.category-page-row {
  align-items: flex-start !important;
  gap: 0 !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.col.large-3.hide-for-medium {
  padding-right: 0 !important;
}
#shop-sidebar.sidebar-inner {
  position: sticky !important;
  top: 90px !important;
  padding: 20px 20px 20px 0 !important;
}

/* Sidebar widget title */
#shop-sidebar .widget-title.shop-sidebar {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--sc-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 14px !important;
  font-family: var(--sc-font) !important;
}
#shop-sidebar .is-divider.small {
  background: var(--sc-border) !important;
  height: 1px !important;
  margin: 8px 0 14px !important;
}

/* Product categories list */
#shop-sidebar .product-categories {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#shop-sidebar .product-categories .cat-item {
  border-bottom: 1px solid rgba(21,96,189,0.07) !important;
}
#shop-sidebar .product-categories .cat-item > a {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-text) !important;
  padding: 9px 8px !important;
  border-radius: 6px !important;
  transition: all .18s !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
#shop-sidebar .product-categories .cat-item > a:hover {
  background: var(--sc-light) !important;
  color: var(--sc-blue) !important;
  padding-left: 14px !important;
}
#shop-sidebar .product-categories .current-cat > a {
  color: var(--sc-blue) !important;
  font-weight: 700 !important;
  background: rgba(21,96,189,0.06) !important;
}

/* Sub-categories */
#shop-sidebar .product-categories .children {
  padding-left: 14px !important;
  border-left: 2px solid var(--sc-border) !important;
  margin: 4px 0 4px 12px !important;
}
#shop-sidebar .product-categories .children .cat-item > a {
  font-size: 12px !important;
  padding: 7px 8px !important;
  color: var(--sc-gray) !important;
}
#shop-sidebar .product-categories .children .cat-item > a:hover {
  color: var(--sc-blue) !important;
  background: var(--sc-light) !important;
}

/* Toggle button */
#shop-sidebar .product-categories .toggle {
  background: none !important;
  border: none !important;
  color: var(--sc-gray) !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  float: right !important;
  font-size: 12px !important;
}

/* Widget: Sản phẩm gợi ý */
#shop-sidebar .widget_products .product_list_widget {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#shop-sidebar .widget_products .product_list_widget li {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(21,96,189,0.07) !important;
}
#shop-sidebar .widget_products .product_list_widget li a {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  text-decoration: none !important;
  flex: 1 !important;
}
#shop-sidebar .widget_products .product_list_widget li img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--sc-border) !important;
  flex-shrink: 0 !important;
}
#shop-sidebar .widget_products .product_list_widget li .product-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sc-navy) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color .18s !important;
}
#shop-sidebar .widget_products .product_list_widget li a:hover .product-title {
  color: var(--sc-blue) !important;
}

/* ── MAIN CONTENT col.large-9 ───────────────────────────── */
.col.large-9 {
  padding-left: 28px !important;
}

/* Term description */
.shop-container .term-description {
  background: linear-gradient(135deg, rgba(21,96,189,0.04) 0%, rgba(0,194,160,0.04) 100%) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 24px !important;
}
.shop-container .term-description p {
  font-size: 13px !important;
  color: var(--sc-text) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* ── PRODUCT GRID (category page — large-columns-3) ─────── */
.shop-container .products.row.row-small {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.shop-container .products.row.row-small::after { display: none !important; }

.shop-container .products.row > .col {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* col-inner & box stretch */
.shop-container .col-inner,
.shop-container .product-small.box {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card */
.shop-container .product-small.box {
  background: var(--sc-white) !important;
  border: 1.5px solid rgba(21,96,189,0.15) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .22s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  box-sizing: border-box !important;
}
.shop-container .product-small.col:hover .product-small.box {
  border-color: var(--sc-blue) !important;
  box-shadow: 0 8px 28px rgba(21,96,189,0.13) !important;
  transform: translateY(-3px) !important;
}

/* Image */
.shop-container .box-image {
  background: var(--sc-light) !important;
  border-bottom: 1.5px solid rgba(21,96,189,0.1) !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 5 / 6 !important;
  flex-shrink: 0 !important;
}
.shop-container .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease !important;
}
.shop-container .product-small.col:hover .box-image img:first-child {
  transform: scale(1.05) !important;
}
.shop-container .product-small.col:hover .box-image {
  border-color: rgba(21,96,189,0.25) !important;
}

/* Quick View */
.shop-container .image-tools.grid-tools {
  background: linear-gradient(0deg, rgba(10,22,40,0.55) 0%, transparent 100%) !important;
  padding: 14px 10px 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.shop-container .quick-view {
  background: white !important;
  color: var(--sc-navy) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 16px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-family: var(--sc-font) !important;
  letter-spacing: 0.2px !important;
  transition: background .18s !important;
}
.shop-container .quick-view:hover {
  background: var(--sc-teal) !important;
}

/* Text area */
.shop-container .box-text.box-text-products {
  padding: 13px 14px 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Category pill */
.shop-container .product-cat.category {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--sc-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 7px !important;
  opacity: 1 !important;
  display: inline-block !important;
  background: rgba(21,96,189,0.07) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1.3 !important;
  /* truncate long category names */
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Product name */
.shop-container .woocommerce-loop-product__title,
.shop-container p.name.product-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sc-navy) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.shop-container .woocommerce-LoopProduct-link {
  color: var(--sc-navy) !important;
  text-decoration: none !important;
}
.shop-container .woocommerce-LoopProduct-link:hover { color: var(--sc-blue) !important; }

/* Price */
.shop-container .price {
  color: var(--sc-blue) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* ── PAGINATION ──────────────────────────────────────────── */
.woocommerce-pagination {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--sc-border) !important;
}
.woocommerce-pagination .page-numbers {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}
.woocommerce-pagination .page-numbers li { margin: 0 !important; }

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--sc-font) !important;
  transition: all .18s !important;
  text-decoration: none !important;
  border: 1.5px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  background: var(--sc-white) !important;
}
.woocommerce-pagination .page-numbers a:hover {
  border-color: var(--sc-blue) !important;
  color: var(--sc-blue) !important;
  background: rgba(21,96,189,0.05) !important;
}
.woocommerce-pagination .page-numbers .current {
  background: var(--sc-blue) !important;
  color: white !important;
  border-color: var(--sc-blue) !important;
}
.woocommerce-pagination .page-numbers .dots {
  border: none !important;
  background: none !important;
  color: var(--sc-gray) !important;
  width: auto !important;
}
.woocommerce-pagination .page-numbers .next,
.woocommerce-pagination .page-numbers .prev {
  background: var(--sc-light) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-navy) !important;
  width: 38px !important;
}
.woocommerce-pagination .page-numbers .next:hover,
.woocommerce-pagination .page-numbers .prev:hover {
  background: var(--sc-blue) !important;
  border-color: var(--sc-blue) !important;
  color: white !important;
}

/* ── FOOTER (Flatsome UX Builder sections) ───────────────── */

/* Footer top bar xanh */
#section_607980137 {
  background: var(--sc-blue) !important;
  padding: 24px 0 !important;
}
#section_607980137 h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 4px !important;
}
#section_607980137 p {
  font-size: 12px !important;
  color: rgba(255,255,255,0.75) !important;
  margin: 0 !important;
}
#section_607980137 .col-inner {
  text-align: center !important;
  padding: 12px 16px !important;
  border-right: 1px solid rgba(255,255,255,0.18) !important;
}
#section_607980137 .col:last-child .col-inner {
  border-right: none !important;
}

/* Footer main tối */
#section_748387058 {
  background: #1e2830 !important;
  padding: 56px 0 !important;
}
#section_748387058 p,
#section_748387058 span,
#section_748387058 li,
#section_748387058 a {
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: var(--sc-font) !important;
  line-height: 1.7 !important;
}
#section_748387058 a:hover { color: var(--sc-teal) !important; }
#section_748387058 h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 4px !important;
  font-family: var(--sc-font) !important;
}
#section_748387058 .is-divider {
  background-color: rgba(255,255,255,0.15) !important;
  height: 1px !important;
  margin: 10px 0 14px !important;
  max-width: 100% !important;
}

/* Footer logo */
#section_748387058 img {
  max-width: 160px !important;
  margin-bottom: 16px !important;
}

/* Footer menu links */
#section_748387058 .ux-menu-link__link {
  padding: 5px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#section_748387058 .ux-menu-link__icon {
  font-size: 10px !important;
  color: var(--sc-teal) !important;
  flex-shrink: 0 !important;
}
#section_748387058 .ux-menu-link--active .ux-menu-link__text {
  color: var(--sc-teal) !important;
  font-weight: 700 !important;
}

/* Footer social icons */
#section_748387058 .social-icons a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  transition: all .18s !important;
  margin-right: 6px !important;
}
#section_748387058 .social-icons a:hover {
  background: var(--sc-teal) !important;
  color: var(--sc-navy) !important;
}

/* ── RESPONSIVE CATEGORY PAGE ─────────────────────────────── */

/* Tablet lớn ≤ 1200px: sidebar nhỏ lại */
@media (max-width: 1200px) {
  .shop-container .products.row.row-small {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .col.large-9 { padding-left: 20px !important; }
}

/* Tablet ≤ 960px: sidebar ẩn, main full width */
@media (max-width: 960px) {
  .category-page-row { display: block !important; }

  .col.large-3.hide-for-medium {
    display: none !important;
  }
  .col.large-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    float: none !important;
  }

  /* Filter button show */
  .category-filtering { display: flex !important; margin-bottom: 16px !important; }
  .category-filter-row .filter-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--sc-white) !important;
    border: 1.5px solid var(--sc-border) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--sc-navy) !important;
    text-decoration: none !important;
    transition: all .18s !important;
  }
  .category-filter-row .filter-button:hover {
    border-color: var(--sc-blue) !important;
    color: var(--sc-blue) !important;
  }

  /* 3 cột → 3 cột vẫn ok trên tablet */
  .shop-container .products.row.row-small {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Mobile ≤ 640px */
@media (max-width: 640px) {
  /* Page title */
  .shop-page-title .page-title-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .woocommerce-result-count { display: block !important; }

  /* 2 cột sản phẩm */
  .shop-container .products.row.row-small {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .shop-container .box-text.box-text-products { padding: 10px 11px 13px !important; }
  .shop-container .woocommerce-loop-product__title { font-size: 11.5px !important; }
  .shop-container .product-cat.category { font-size: 9px !important; }

  /* Pagination */
  .woocommerce-pagination .page-numbers a,
  .woocommerce-pagination .page-numbers span { width: 34px !important; height: 34px !important; font-size: 12px !important; }

  /* Footer sections */
  #section_607980137 { padding: 16px 0 !important; }
  #section_607980137 .col-inner {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 10px 16px !important;
  }
  #section_607980137 .col:last-child .col-inner { border-bottom: none !important; }
  #section_748387058 { padding: 40px 0 !important; }
}

/* Mobile nhỏ ≤ 400px */
@media (max-width: 400px) {
  .shop-container .products.row.row-small {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .woocommerce-pagination { margin-top: 24px !important; }
}
@media (max-width: 849px) {
  .sc-hero .col.medium-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
.sc-brands-strip {
  padding: 10px 10px;
}
@media (max-width: 600px) {
  #dich-vu, #san-pham, .sc-why-section, section[style*="clamp(56px"] {
    padding: 48px 10px !important;
  }
}
.shop-container .price-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* ============================================================
   SEMECO VIỆT NAM – Custom CSS
   Mới thêm
   ============================================================ */
/* ============================================================
   SEMECO VIỆT NAM – Custom CSS
   Aesthetic: Clean Industrial / Technical Precision
   Version: 1.0 | April 2026
   ============================================================ */
/* ============================================================
   SEMECO – Fix layout lệch sang trái (Flatsome theme)
   Dán vào: Appearance → Customize → Additional CSS
   
   NGUYÊN NHÂN THỰC SỰ:
   Flatsome định nghĩa: .row { margin-left: -15px; margin-right: -15px }
   Để bù lại, mỗi .col có: padding-left: 15px; padding-right: 15px
   Nhưng nếu container ngoài không có overflow:hidden,
   margin -15px bên trái sẽ đẩy toàn bộ row tràn ra ngoài viewport.
   
   FIX: Ngăn overflow tại #main + reset margin về 0 trên đúng row đó
   ============================================================ */

/* 1. Ngăn tràn ngang tại container chứa layout chính */
#main {
  overflow-x: hidden;
}

/* 2. Reset negative margin trên đúng row bị lỗi */

/* 3. Vì margin bị reset về 0, padding cột cũng cần điều chỉnh
   Giữ padding ngang cho nội dung không sát viền */
#main > .row.category-page-row > .col.large-3 {
  padding-left: 20px;
  padding-right: 20px;
}

#main > .row.category-page-row > .col.large-9 {
  padding-left: 20px;
  padding-right: 20px;
}

/* 4. Mobile: đảm bảo không bị tràn */
@media (max-width: 849px) {
  #main > .row.category-page-row > .col.large-9 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.category-page-row {
  margin: 0;
}
.row.category-page-row {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.category-page-row {
    padding-left: 15px;
    padding-right: 15px;
}
/* ============================================================
   SEMECO – Fix layout lệch sang trái (Flatsome theme)
   Dán vào: Appearance → Customize → Additional CSS
   ============================================================ */

/* 
/* ============================================================
   SEMECO – Product Page CSS
   Trang chi tiết sản phẩm (single product)
   Aesthetic: Clean Technical / Industrial Precision
   Dán vào: Appearance → Customize → Additional CSS
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans:wght@300;400;500;600&display=swap');

/* ---------- Variables ---------- */
:root {
  --sp-blue:       #1a5fa8;
  --sp-blue-dk:    #12407a;
  --sp-accent:     #f0a500;
  --sp-dark:       #1c1c1c;
  --sp-mid:        #444;
  --sp-muted:      #6b7280;
  --sp-border:     #dde3ec;
  --sp-light:      #f5f7fa;
  --sp-white:      #ffffff;
  --sp-radius:     10px;
  --sp-shadow:     0 4px 24px rgba(26,95,168,.10);
  --sp-shadow-hover: 0 10px 36px rgba(26,95,168,.18);
  --sp-trans:      0.25s ease;
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'Noto Sans', sans-serif;
}

/* ============================================================
   PRODUCT PAGE WRAPPER
   ============================================================ */

/* Fix #main padding cho trang sản phẩm */
.single-product #main {
  padding-left: 15px !important;
  padding-right: 15px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.single-product .shop-container {
  max-width: 1080px;
  margin: 0 auto;
}

.single-product .product-container {
  background: var(--sp-white);
  border-radius: var(--sp-radius);
  overflow: hidden;
}

/* ============================================================
   PRODUCT MAIN — Gallery + Info layout
   ============================================================ */

.single-product .product-main {
  padding: 40px 0 32px;
}

.single-product .content-row.row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   GALLERY COLUMN
   ============================================================ */

.single-product .product-gallery.col {
  flex: 0 0 42% !important;
  width: 42% !important;
  padding: 0 28px 0 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Main gallery slider */
.single-product .woocommerce-product-gallery__wrapper {
  border-radius: var(--sp-radius);
  overflow: hidden;
  background: var(--sp-light);
  border: 1px solid var(--sp-border);
}

.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

.single-product .woocommerce-product-gallery__image:hover img {
  transform: scale(1.03);
}

/* Flickity navigation buttons */
.single-product .flickity-button {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  transition: background var(--sp-trans), transform var(--sp-trans) !important;
}

.single-product .flickity-button:hover {
  background: var(--sp-blue) !important;
  transform: scale(1.08) !important;
}

.single-product .flickity-button:hover svg path {
  fill: var(--sp-white) !important;
}

/* Thumbnails */
.single-product .product-thumbnails {
  margin-top: 10px !important;
}

.single-product .product-thumbnails .col {
  padding: 3px !important;
  cursor: pointer;
}

.single-product .product-thumbnails .col img {
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color var(--sp-trans), transform var(--sp-trans);
  object-fit: cover;
  aspect-ratio: 1;
  width: 100%;
}

.single-product .product-thumbnails .col.is-nav-selected img,
.single-product .product-thumbnails .col:hover img {
  border-color: var(--sp-blue);
  transform: scale(1.04);
}

/* Zoom button */
.single-product .zoom-button {
  background: rgba(255,255,255,.9) !important;
  border: 1.5px solid var(--sp-border) !important;
  color: var(--sp-blue) !important;
  transition: all var(--sp-trans) !important;
}

.single-product .zoom-button:hover {
  background: var(--sp-blue) !important;
  color: var(--sp-white) !important;
  border-color: var(--sp-blue) !important;
}

/* ============================================================
   PRODUCT INFO COLUMN
   ============================================================ */

.single-product .product-info.col-fit {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 0 0 4px !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Breadcrumb */
.single-product .woocommerce-breadcrumb {
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sp-muted);
  margin-bottom: 10px;
  display: block;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--sp-blue);
  font-weight: 600;
  transition: color var(--sp-trans);
}

.single-product .woocommerce-breadcrumb a:hover {
  color: var(--sp-blue-dk);
}

.single-product .woocommerce-breadcrumb .divider {
  margin: 0 5px;
  color: var(--sp-border);
}

/* Product title */
.single-product .product-title.product_title {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--sp-dark) !important;
  letter-spacing: .01em !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* Divider */
.single-product .is-divider.small {
  max-width: 48px;
  height: 3px;
  background: var(--sp-blue) !important;
  border-radius: 3px;
  margin: 10px 0 16px !important;
}

/* Prev/next nav */
.single-product .next-prev-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.single-product .next-prev-thumbs .button.icon {
  width: 34px !important;
  height: 34px !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-blue) !important;
  border-radius: 50% !important;
  font-size: .85rem !important;
  transition: all var(--sp-trans) !important;
}

.single-product .next-prev-thumbs .button.icon:hover {
  background: var(--sp-blue) !important;
  border-color: var(--sp-blue) !important;
  color: var(--sp-white) !important;
}

/* Short description */
.single-product .product-short-description {
  background: linear-gradient(135deg, rgba(26,95,168,.04), rgba(26,95,168,.01));
  border-left: 4px solid var(--sp-blue);
  border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
  padding: 16px 20px;
  margin: 0 0 20px 0;
}

.single-product .product-short-description p {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--sp-mid);
  margin-bottom: 8px;
}

.single-product .product-short-description p:last-child {
  margin-bottom: 0;
}

.single-product .product-short-description strong {
  color: var(--sp-dark);
  font-weight: 600;
}

/* Product meta (categories) */
.single-product .product_meta {
  padding: 14px 0;
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 18px;
}

.single-product .product_meta .posted_in {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--sp-muted);
}

.single-product .product_meta .posted_in a {
  color: var(--sp-blue);
  font-weight: 500;
  text-decoration: none;
  padding: 2px 8px;
  background: rgba(26,95,168,.07);
  border-radius: 20px;
  margin: 2px 2px;
  display: inline-block;
  transition: all var(--sp-trans);
}

.single-product .product_meta .posted_in a:hover {
  background: var(--sp-blue);
  color: var(--sp-white);
}

/* Share icons */
.single-product .share-icons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.single-product .share-icons .icon.button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--sp-border) !important;
  color: var(--sp-muted) !important;
  font-size: .9rem !important;
  transition: all var(--sp-trans) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.single-product .share-icons .icon.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}

.single-product .share-icons .facebook:hover  { background: #1877f2 !important; border-color: #1877f2 !important; color: #fff !important; }
.single-product .share-icons .twitter:hover   { background: #1da1f2 !important; border-color: #1da1f2 !important; color: #fff !important; }
.single-product .share-icons .linkedin:hover  { background: #0a66c2 !important; border-color: #0a66c2 !important; color: #fff !important; }
.single-product .share-icons .pinterest:hover { background: #e60023 !important; border-color: #e60023 !important; color: #fff !important; }
.single-product .share-icons .whatsapp:hover  { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.single-product .share-icons .email:hover     { background: var(--sp-blue) !important; border-color: var(--sp-blue) !important; color: #fff !important; }

/* ============================================================
   PRODUCT SIDEBAR (right column – Mẫu vừa xem)
   ============================================================ */

.single-product #product-sidebar.col {
  flex: 0 0 220px !important;
  width: 220px !important;
  padding: 0 0 0 20px !important;
  box-sizing: border-box !important;
  float: none !important;
  border-left: 1px solid var(--sp-border);
}

.single-product #product-sidebar .widget-title {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sp-dark);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sp-blue);
  display: block;
  margin-bottom: 12px;
}

.single-product #product-sidebar .product_list_widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.single-product #product-sidebar .product_list_widget li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  transition: background var(--sp-trans);
}

.single-product #product-sidebar .product_list_widget li a:hover {
  background: var(--sp-light);
}

.single-product #product-sidebar .product_list_widget li a img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--sp-border);
  flex-shrink: 0;
}

.single-product #product-sidebar .product-title {
  font-size: .78rem;
  font-weight: 500;
  color: var(--sp-mid);
  line-height: 1.35;
  transition: color var(--sp-trans);
}

.single-product #product-sidebar .product_list_widget li a:hover .product-title {
  color: var(--sp-blue);
}

/* ============================================================
   PRODUCT FOOTER — Tabs
   ============================================================ */

.single-product .product-footer {
  padding-top: 0;
  margin-top: 24px;
}

/* Tab nav */
.single-product .wc-tabs.product-tabs {
  display: flex !important;
  gap: 0 !important;
  border: 1px solid var(--sp-border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

.single-product .wc-tabs.product-tabs li {
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .wc-tabs.product-tabs li a {
  display: block;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all var(--sp-trans) !important;
  background: none !important;
}

.single-product .wc-tabs.product-tabs li a:hover {
  color: var(--sp-blue) !important;
}

.single-product .wc-tabs.product-tabs li.active a {
  color: var(--sp-blue) !important;
  border-bottom-color: var(--sp-blue) !important;
}

/* Tab panels */
.single-product .tab-panels {
  padding: 0;
}

.single-product .woocommerce-Tabs-panel {
  padding: 32px 0 !important;
  animation: fadeInUp .3s ease;
}

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

/* Tab content typography */
.single-product .woocommerce-Tabs-panel h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--sp-dark) !important;
  margin: 24px 0 12px !important;
  padding-bottom: 8px !important;
  letter-spacing: .02em !important;
}

.single-product .woocommerce-Tabs-panel h2:first-child {
  margin-top: 0 !important;
}

.single-product .woocommerce-Tabs-panel p {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  line-height: 1.75 !important;
  color: var(--sp-mid) !important;
  margin-bottom: 12px !important;
}

.single-product .woocommerce-Tabs-panel ul,
.single-product .woocommerce-Tabs-panel ol {
  padding-left: 20px !important;
  margin-bottom: 14px !important;
}

.single-product .woocommerce-Tabs-panel li {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  line-height: 1.7 !important;
  color: var(--sp-mid) !important;
  margin-bottom: 5px !important;
}

.single-product .woocommerce-Tabs-panel ul li {
  list-style: disc !important;
}

/* Tables in description */
.single-product .woocommerce-Tabs-panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: var(--font-body);
  font-size: .88rem;
  border-radius: var(--sp-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sp-border);
}

.single-product .woocommerce-Tabs-panel table td,
.single-product .woocommerce-Tabs-panel table th {
  padding: 11px 16px;
  border-bottom: 1px solid var(--sp-border);
  text-align: left;
  vertical-align: top;
}

.single-product .woocommerce-Tabs-panel table tr:last-child td {
  border-bottom: none;
}

.single-product .woocommerce-Tabs-panel table tr:nth-child(odd) {
  background: var(--sp-light);
}

.single-product .woocommerce-Tabs-panel table td:first-child {
  font-weight: 600;
  color: var(--sp-dark);
  width: 36%;
  white-space: nowrap;
}

.single-product .woocommerce-Tabs-panel table td:first-child b,
.single-product .woocommerce-Tabs-panel table th b {
  color: var(--sp-dark);
}

/* Images in description */
.single-product .woocommerce-Tabs-panel .wp-caption {
  background: var(--sp-light);
  border-radius: var(--sp-radius);
  padding: 12px;
  margin: 20px auto !important;
  border: 1px solid var(--sp-border);
}

.single-product .woocommerce-Tabs-panel .wp-caption img {
  border-radius: 6px;
  width: 100%;
  height: auto;
}

.single-product .woocommerce-Tabs-panel .wp-caption-text {
  font-size: .8rem;
  color: var(--sp-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* ============================================================
   REVIEWS TAB
   ============================================================ */

.single-product .woocommerce-Reviews-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--sp-dark) !important;
  margin-bottom: 16px !important;
}

.single-product .woocommerce-noreviews {
  color: var(--sp-muted);
  font-style: italic;
  font-size: .9rem;
  padding: 20px;
  background: var(--sp-light);
  border-radius: var(--sp-radius);
  text-align: center;
}

/* Review form */
.single-product .review-form-inner.has-border {
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  padding: 24px !important;
  background: var(--sp-light) !important;
}

.single-product #reply-title {
  font-size: 1.2rem !important;
  color: var(--sp-dark) !important;
  margin-bottom: 16px !important;
}

.single-product .comment-form input[type="text"],
.single-product .comment-form input[type="email"],
.single-product .comment-form textarea {
  border: 1.5px solid var(--sp-border) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  width: 100% !important;
  transition: border-color var(--sp-trans) !important;
  background: var(--sp-white) !important;
}

.single-product .comment-form input:focus,
.single-product .comment-form textarea:focus {
  border-color: var(--sp-blue) !important;
  outline: none !important;
}

.single-product .comment-form .submit {
  background: var(--sp-blue) !important;
  color: var(--sp-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 28px !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--sp-trans), transform var(--sp-trans) !important;
}

.single-product .comment-form .submit:hover {
  background: var(--sp-blue-dk) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

.single-product .related.related-products-wrapper {
  padding: 40px 0 0;
  border-top: 1px solid var(--sp-border);
  margin-top: 20px;
}

.single-product .product-section-title-related {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--sp-dark) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--sp-blue) !important;
  display: inline-block !important;
}

/* Related product cards */
.single-product .related .product-small .box {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
  transition: box-shadow var(--sp-trans), transform var(--sp-trans), border-color var(--sp-trans);
  background: var(--sp-white);
}

.single-product .related .product-small .box:hover {
  box-shadow: var(--sp-shadow-hover);
  transform: translateY(-4px);
  border-color: var(--sp-blue);
}

.single-product .related .product-small .box-image {
  background: var(--sp-light);
  overflow: hidden;
  aspect-ratio: 247/296;
}

.single-product .related .product-small .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.single-product .related .product-small .box:hover .box-image img:first-child {
  transform: scale(1.05);
}

.single-product .related .product-small .product-cat {
  font-size: .7rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--sp-blue) !important;
  opacity: .85 !important;
}

.single-product .related .product-small .product-title a {
  font-size: .98rem !important;
  font-weight: 600 !important;
  color: var(--sp-dark) !important;
  line-height: 1.3 !important;
  transition: color var(--sp-trans) !important;
}

.single-product .related .product-small .box:hover .product-title a {
  color: var(--sp-blue) !important;
}

.single-product .related .box-text-products {
  padding: 12px 14px 14px !important;
}

/* Related products slider nav */
.single-product .related .flickity-button {
  background: var(--sp-white) !important;
  border: 1.5px solid var(--sp-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
  border-radius: 50% !important;
  transition: all var(--sp-trans) !important;
}

.single-product .related .flickity-button:hover {
  background: var(--sp-blue) !important;
  border-color: var(--sp-blue) !important;
}

.single-product .related .flickity-button:hover svg path {
  fill: var(--sp-white) !important;
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .single-product .product-gallery.col {
    flex: 0 0 46% !important;
    width: 46% !important;
    padding-right: 20px !important;
  }

  .single-product #product-sidebar.col {
    flex: 0 0 180px !important;
    width: 180px !important;
    padding-left: 14px !important;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
  .single-product .content-row.row {
    flex-direction: column !important;
  }

  .single-product .product-gallery.col {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 0 20px 0 !important;
  }

  .single-product .product-info.col-fit {
    padding: 0 !important;
  }

  .single-product #product-sidebar.col {
    display: none !important;
  }

  .single-product .product-title.product_title {
    font-size: 1.6rem !important;
  }

  .single-product .wc-tabs.product-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .single-product .wc-tabs.product-tabs li a {
    white-space: nowrap !important;
    padding: 12px 16px !important;
  }

  .single-product .woocommerce-Tabs-panel {
    padding: 20px 0 !important;
  }

  .single-product .woocommerce-Tabs-panel table td:first-child {
    width: auto;
    white-space: normal;
  }

  .single-product .related .row.row-slider {
    overflow: hidden !important;
  }
}

/* ============================================================
   RESPONSIVE — Small mobile (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .single-product .product-main {
    padding: 24px 0 16px !important;
  }

  .single-product .product-short-description {
    padding: 12px 14px !important;
  }

  .single-product .woocommerce-Tabs-panel table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.nav-line > li > a::before {
  content: " ";
  background-color: none;
}
#main .row {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#main .category-page-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.row.medium-columns-3.small-columns-2:not(.row-slider) {
  display: grid !important;
  gap: 14px !important;
}
.related-products-wrapper .row {
    display: flex !important;
}
.shop-container .price-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (min-width: 768px) {
.row.medium-columns-3.small-columns-2:not(.row-slider) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
}