/*
Theme Name: SFood
Theme URI: https://sfoodfarm.com
Author: SFood Farm
Description: Giao diện chính thức của SFood Farm
Version: 1.2.8
Tags: woocommerce, food, ecommerce
Text Domain: sfood
*/

/* ═══════════════════════════════════════
   BIẾN MÀU & CƠ SỞ
═══════════════════════════════════════ */
:root {
  --sf-green:      #2e7d32;
  --sf-green-dark: #1b5e20;
  --sf-green-light:#e8f5e9;
  --sf-orange:     #e8622a;
  --sf-bg:         #faf6f1;
  --sf-card:       #ffffff;
  --sf-border:     #ede9e0;
  --sf-text:       #1a1a1a;
  --sf-muted:      #666666;
  --sf-radius:     10px;
  --sf-shadow:     0 2px 12px rgba(0,0,0,0.07);
  --sf-shadow-hover: 0 8px 28px rgba(0,0,0,0.13);
  --sf-max-width:  1200px;
  --sf-font:       'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--sf-font);
  font-size: 15px;
  color: var(--sf-text);
  background: var(--sf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sf-green); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ═══════════════════════════════════════
   CONTAINER
═══════════════════════════════════════ */
.sf-container {
  max-width: var(--sf-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ═══════════════════════════════════════
   TOP BAR
═══════════════════════════════════════ */
.sf-topbar {
  background: var(--sf-green);
  color: #fff;
  font-size: 12px;
  padding: 6px 0;
}
.sf-topbar .sf-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sf-topbar a { color: #fff; opacity: 0.9; }
.sf-topbar a:hover { opacity: 1; text-decoration: underline; }
.sf-topbar-left, .sf-topbar-right { display: flex; gap: 16px; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.sf-header {
  background: #fff;
  border-bottom: 1px solid var(--sf-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sf-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  max-width: var(--sf-max-width);
  margin: 0 auto;
}

/* Logo */
.sf-logo img { height: 62px; width: auto; }
.sf-logo a { display: block; }

/* Search */
.sf-search { flex: 1; max-width: 520px; }
.sf-search form {
  display: flex;
  border: 2px solid var(--sf-green);
  border-radius: 8px;
  overflow: hidden;
}
.sf-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 14px;
  font-family: var(--sf-font);
  font-size: 14px;
  color: var(--sf-text);
  background: #fff;
}
.sf-search button {
  background: var(--sf-green);
  border: none;
  padding: 0 16px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}
.sf-search button:hover { background: var(--sf-green-dark); }

/* Header actions */
.sf-header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.sf-cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sf-text);
  position: relative;
}
.sf-cart-count {
  background: var(--sf-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -6px;
}
.sf-account-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-muted);
}
.sf-account-link:hover { color: var(--sf-green); }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
.sf-nav {
  background: #fff;
  border-bottom: 1px solid var(--sf-border);
}
.sf-nav-inner {
  max-width: var(--sf-max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
}
.sf-nav ul { display: flex; align-items: center; }
.sf-nav ul li { position: relative; }
.sf-nav ul li a {
  display: block;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text);
  transition: color 0.15s;
}
.sf-nav ul li a:hover,
.sf-nav ul li.current-menu-item > a,
.sf-nav ul li.current-menu-ancestor > a { color: var(--sf-green); }

/* Dropdown */
.sf-nav ul li:hover > ul { display: block; }
.sf-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid var(--sf-border);
  border-top: 3px solid var(--sf-green);
  z-index: 100;
}
.sf-nav ul ul li a {
  padding: 10px 18px;
  font-weight: 500;
  font-size: 13.5px;
  border-bottom: 1px solid #f5f5f5;
}
.sf-nav ul ul li:last-child a { border-bottom: none; }
.sf-nav ul ul li a:hover { background: var(--sf-green-light); color: var(--sf-green); padding-left: 22px; }

/* Mobile hamburger */
.sf-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.sf-breadcrumb {
  padding: 10px 0;
  font-size: 13px;
  color: var(--sf-muted);
}
.sf-breadcrumb a { color: var(--sf-muted); }
.sf-breadcrumb a:hover { color: var(--sf-green); }
.sf-breadcrumb span + span::before { content: " / "; color: #ccc; margin: 0 4px; }

/* ═══════════════════════════════════════
   PAGE TITLE (SHOP / CATEGORY)
═══════════════════════════════════════ */
.sf-page-hero {
  background: linear-gradient(135deg, var(--sf-green) 0%, #1b5e20 100%);
  color: #fff;
  padding: 36px 0 32px;
  margin-bottom: 32px;
}
.sf-page-hero h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.sf-page-hero p { font-size: 14px; opacity: 0.85; }

/* ═══════════════════════════════════════
   CATEGORY TABS
═══════════════════════════════════════ */
.sf-cat-tabs-wrap { margin-bottom: 28px; }
.sf-cat-hint {
  font-size: 12px;
  color: var(--sf-muted);
  font-style: italic;
  margin-bottom: 10px;
}
.sf-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}
.sf-cat-tab {
  display: inline-block;
  padding: 8px 18px;
  border: 1.5px solid var(--sf-green);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-green);
  background: #fff;
  transition: all 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.4;
}
.sf-cat-tab:hover { background: var(--sf-green-light); }
.sf-cat-tab.active {
  background: var(--sf-green);
  color: #fff;
  border-color: var(--sf-green);
  box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}

/* ═══════════════════════════════════════
   SHOP META (kết quả + sắp xếp)
═══════════════════════════════════════ */
.sf-shop-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--sf-muted);
}
.sf-shop-meta .woocommerce-result-count {
  font-size: 13px;
  color: var(--sf-muted);
  margin: 0;
}
.woocommerce-ordering select {
  border: 1.5px solid var(--sf-border);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--sf-font);
  font-size: 13px;
  color: var(--sf-text);
  outline: none;
  cursor: pointer;
  background: #f9f9f9;
  transition: border-color 0.15s;
}
.woocommerce-ordering select:hover { border-color: var(--sf-green); }
.woocommerce-ordering select:focus { border-color: var(--sf-green); box-shadow: 0 0 0 2px rgba(46,125,50,0.1); }

/* ═══════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}
/* Xóa clearfix pseudo-elements của WC khỏi grid (chúng trở thành grid item, chiếm mất cột 1) */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════
   PRODUCT CARD
═══════════════════════════════════════ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--sf-card) !important;
  border-radius: var(--sf-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--sf-shadow) !important;
  border: 1px solid var(--sf-border) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;       /* Override WC width:22.05% */
  float: none !important;       /* Override WC float:left */
  clear: none !important;       /* Override WC clear:both on .first */
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--sf-shadow-hover) !important;
}

/* Link ảnh + tên */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Ảnh sản phẩm */
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto !important;          /* Tránh circular dependency với aspect-ratio */
  aspect-ratio: 1/1 !important;    /* Giữ hình vuông */
  object-fit: contain !important;
  background: #fff !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04) !important; }

/* Nút Xem chi tiết */
.sf-view-btn {
  display: block;
  text-align: center;
  border: 1.5px solid var(--sf-green);
  border-radius: 7px;
  color: var(--sf-green);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.sf-view-btn:hover { background: var(--sf-green); color: #fff; }

/* Tên sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sf-text) !important;
  padding: 10px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Giá */
.woocommerce ul.products li.product .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #c0392b !important;
  padding: 2px 14px 8px !important;
  margin: 0 !important;
  display: block !important;
}
.woocommerce ul.products li.product .price del { color: #aaa !important; font-size: 12px !important; font-weight: 400 !important; margin-right: 4px; }

/* ─── Product Badge ─────────────────── */
.sf-product-card { position: relative !important; }
.sf-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sf-badge-sale { background: var(--sf-orange); color: #fff; }
.sf-badge-new  { background: var(--sf-green);  color: #fff; }

/* ─── Card Image Wrapper ─────────────── */
.sf-card-img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  background: #fff !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.sf-card-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  padding: 14px !important;
  transition: transform 0.3s ease;
}
.sf-product-card:hover .sf-card-img img { transform: scale(1.05); }

/* ─── Card Actions (2 nút) ───────────── */
.sf-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 12px 12px;
}
.sf-add-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--sf-green);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s;
  border: none;
  cursor: pointer;
  width: 100%;
}
.sf-add-cart-btn:hover {
  background: var(--sf-green-dark);
  transform: translateY(-1px);
  color: #fff !important;
}
.sf-add-cart-btn.loading { opacity: 0.7; pointer-events: none; }

/* ẩn badge sale mặc định của WC */
.woocommerce span.onsale { display: none !important; }

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.woocommerce-pagination {
  margin: 36px 0 0;
  display: flex;
  justify-content: center;
}
.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--sf-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text);
  transition: all 0.15s;
}
.woocommerce-pagination ul li a:hover { border-color: var(--sf-green); color: var(--sf-green); }
.woocommerce-pagination ul li span.current {
  background: var(--sf-green);
  border-color: var(--sf-green);
  color: #fff;
}

/* ═══════════════════════════════════════
   TRANG DANH MỤC (shortcode)
═══════════════════════════════════════ */
.sfood-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 8px 0 40px;
}
.sfood-cat-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sf-shadow);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--sf-border);
}
.sfood-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sf-shadow-hover);
}
.sfood-cat-img-wrap { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #f9f9f9; }
.sfood-cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.sfood-cat-card:hover .sfood-cat-img-wrap img { transform: scale(1.05); }
.sfood-cat-info { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.sfood-cat-name { font-size: 17px !important; font-weight: 700 !important; color: var(--sf-text) !important; margin: 0 0 2px !important; }
.sfood-cat-count { font-size: 13px; color: #888; }
.sfood-cat-btn { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--sf-green); }

/* ═══════════════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════════════ */
.sf-main { padding: 32px 0 48px; }
.sf-page-content { background: #fff; border-radius: var(--sf-radius); padding: 32px; box-shadow: var(--sf-shadow); }
.sf-page-content h1, .sf-page-content h2 { color: var(--sf-green); margin-bottom: 16px; }
.sf-page-content p { margin-bottom: 14px; line-height: 1.8; }

/* ═══════════════════════════════════════
   FLOATING BUTTONS
═══════════════════════════════════════ */
#sf-float {
  position: fixed;
  bottom: 28px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
#sf-float a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
#sf-float a:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
#sf-float .sf-top { background: linear-gradient(145deg, #2e7d32, #1b5e20); display: none; }
#sf-float .sf-top.visible { display: flex; }
#sf-float .sf-zalo { background: #0068ff; }
#sf-float .sf-msg { background: linear-gradient(145deg, #7b2ff7, #0668e1); }
#sf-float .sf-phone { background: linear-gradient(145deg, #f97316, #c2410c); }
#sf-float a svg { display: block; flex-shrink: 0; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.sf-footer {
  background: #1a2e1a;
  color: #ccc;
  padding: 48px 0 0;
  margin-top: 48px;
  font-size: 14px;
}
.sf-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sf-footer h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.sf-footer-brand p { line-height: 1.8; margin-bottom: 16px; color: #aaa; font-size: 13.5px; }
.sf-footer-logo { height: 52px !important; width: auto !important; max-width: 160px !important; margin-bottom: 14px; object-fit: contain; display: block; }
.sf-footer-links li { margin-bottom: 9px; }
.sf-footer-links a { color: #aaa; font-size: 13.5px; transition: color 0.15s; }
.sf-footer-links a:hover { color: #fff; padding-left: 4px; }
.sf-footer-contact li { margin-bottom: 10px; font-size: 13.5px; color: #aaa; display: flex; gap: 8px; align-items: flex-start; }
.sf-footer-contact a { color: #aaa; }
.sf-footer-contact a:hover { color: #fff; }
.sf-footer-bottom {
  padding: 16px 0;
  text-align: center;
  font-size: 12.5px;
  color: #666;
}
.sf-footer-bottom a { color: #888; }
.sf-footer-bottom a:hover { color: #ccc; }

/* ═══════════════════════════════════════
   HOMEPAGE: HERO
═══════════════════════════════════════ */
.sf-hero {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 45%, #33691e 100%);
  color: #fff;
  padding: 64px 0 60px;
  overflow: hidden;
  position: relative;
}
.sf-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}
.sf-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 30%;
  width: 280px; height: 280px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  pointer-events: none;
}
.sf-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sf-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
}
.sf-hero-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 18px;
}
.sf-hero-title span {
  color: #a5d6a7;
}
.sf-hero-sub {
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.88;
  margin-bottom: 32px;
  max-width: 480px;
}
.sf-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.sf-hero-btn-primary {
  display: inline-block;
  background: #fff;
  color: #2e7d32;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 9px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.sf-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  color: #1b5e20;
}
.sf-hero-btn-secondary {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.18s;
}
.sf-hero-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* Hero visual side */
.sf-hero-visual { display: flex; align-items: center; justify-content: center; }
.sf-hero-blob {
  background: rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
}
.sf-hero-emoji-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sf-emoji-card {
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s;
}
.sf-emoji-card:hover { transform: translateY(-3px); }
.sf-emoji-card span { font-size: 32px; line-height: 1; }
.sf-emoji-card small { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 600; white-space: nowrap; }

/* ═══════════════════════════════════════
   HOMEPAGE: STATS BAR
═══════════════════════════════════════ */
.sf-stats-bar {
  background: #1b5e20;
  padding: 32px 0;
}
.sf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.sf-stat {
  text-align: center;
  padding: 8px 20px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.sf-stat:last-child { border-right: none; }
.sf-stat-num {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.sf-stat-num span { font-size: 22px; color: #a5d6a7; }
.sf-stat-lbl { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; }

/* ═══════════════════════════════════════
   HOMEPAGE: SHARED SECTION STYLES
═══════════════════════════════════════ */
.sf-home-cats,
.sf-home-featured,
.sf-home-blog { padding: 60px 0; }
.sf-home-featured { background: #fff; }
/* Featured: 3 cột × 2 hàng trên desktop */
.sf-home-featured ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.sf-home-blog { background: #faf6f1; }

.sf-section-head {
  text-align: center;
  margin-bottom: 36px;
}
.sf-section-head h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--sf-text);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.sf-section-head p {
  font-size: 15px;
  color: var(--sf-muted);
}
.sf-section-head.light h2 { color: #fff; }
.sf-section-head.light p  { color: rgba(255,255,255,0.75); }

.sf-section-cta {
  text-align: center;
  margin-top: 36px;
}
.sf-view-all-btn {
  display: inline-block;
  border: 2px solid var(--sf-green);
  color: var(--sf-green);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.18s;
}
.sf-view-all-btn:hover {
  background: var(--sf-green);
  color: #fff;
}

/* ═══════════════════════════════════════
   HOMEPAGE: CATEGORY GRID
═══════════════════════════════════════ */
.sf-home-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sf-home-cat-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sf-shadow);
  border: 1px solid var(--sf-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.sf-home-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sf-shadow-hover);
  color: inherit;
}
.sf-home-cat-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f5f5f5;
}
.sf-home-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s ease;
}
.sf-home-cat-card:hover .sf-home-cat-img img { transform: scale(1.06); }
.sf-home-cat-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sf-home-cat-body h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sf-text) !important;
  margin: 0 0 2px !important;
}
.sf-home-cat-count { font-size: 13px; color: #999; }
.sf-home-cat-link {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-green);
}

/* ═══════════════════════════════════════
   HOMEPAGE: PROMISE SECTION
═══════════════════════════════════════ */
.sf-home-promise {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  padding: 64px 0;
}
.sf-promise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.sf-promise-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.2s, background 0.2s;
}
.sf-promise-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.15);
}
.sf-promise-icon { font-size: 40px; margin-bottom: 14px; display: block; }
.sf-promise-card h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}
.sf-promise-card p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin: 0 !important;
}

/* ═══════════════════════════════════════
   HOMEPAGE: BLOG GRID
═══════════════════════════════════════ */
.sf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sf-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sf-shadow);
  border: 1px solid var(--sf-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sf-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sf-shadow-hover);
  color: inherit;
}
.sf-blog-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f0f0f0;
}
.sf-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.sf-blog-card:hover .sf-blog-img img { transform: scale(1.05); }
.sf-blog-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: var(--sf-green-light);
}
.sf-blog-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.sf-blog-cat {
  display: inline-block;
  background: var(--sf-green-light);
  color: var(--sf-green);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}
.sf-blog-body h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sf-text) !important;
  line-height: 1.45 !important;
  margin: 4px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.sf-blog-body p {
  font-size: 13.5px;
  color: var(--sf-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.sf-blog-date {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════
   HOMEPAGE: CTA BANNER
═══════════════════════════════════════ */
.sf-home-cta-banner {
  background: var(--sf-orange);
  padding: 48px 0;
}
.sf-cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sf-cta-banner-text h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
}
.sf-cta-banner-text p { font-size: 15px; color: rgba(255,255,255,0.85); margin: 0; }
.sf-cta-banner-btn {
  display: inline-block;
  background: #fff;
  color: var(--sf-orange);
  font-weight: 800;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.sf-cta-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.2);
  color: var(--sf-orange);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* ─── Touch-friendly ──────────────────── */
button, a, .sf-cat-tab { touch-action: manipulation; }

/* ─── 1024px — Tablet ────────────────── */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .sf-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sf-hero-title { font-size: 36px; }
  .sf-home-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-promise-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stats 2x2 */
  .sf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 16px 20px; }
  .sf-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .sf-stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* ─── 768px — Mobile ─────────────────── */
@media (max-width: 768px) {
  /* Top bar: ẩn link trái, giữ lại số điện thoại */
  .sf-topbar-left { display: none; }
  .sf-topbar .sf-container { justify-content: center; }

  /* Header */
  .sf-header-inner { flex-wrap: wrap; gap: 10px; padding: 11px 16px; }
  .sf-logo { flex: 1; }
  .sf-header-actions { margin-left: 0; }
  .sf-search { order: 3; flex: 0 0 100%; max-width: 100%; }

  /* Hamburger: hiện ra trên mobile */
  .sf-hamburger { display: flex; align-items: center; justify-content: center; color: var(--sf-text); }

  /* Nav: ẩn mặc định, hiện khi có class sf-nav-open */
  .sf-nav { display: none; border-bottom: 2px solid var(--sf-green-light); }
  .sf-nav.sf-nav-open { display: block; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
  .sf-nav-inner { padding: 0; }
  .sf-nav > .sf-nav-inner > ul { flex-direction: column; }
  .sf-nav > .sf-nav-inner > ul > li > a {
    padding: 13px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--sf-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sf-nav ul ul { display: none !important; } /* Ẩn dropdown con trên mobile */

  /* Cat tabs: cuộn ngang */
  .sf-cat-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sf-cat-tabs::-webkit-scrollbar { display: none; }

  /* Product grid 2 cột */
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Category shortcode */
  .sfood-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Footer */
  .sf-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .sf-page-hero h1 { font-size: 22px; }

  /* Section padding giảm bớt */
  .sf-home-cats,
  .sf-home-featured,
  .sf-home-blog { padding: 40px 0; }
  .sf-home-promise { padding: 44px 0; }
  .sf-home-cta-banner { padding: 34px 0; }
  .sf-section-head { margin-bottom: 24px; }
  .sf-section-head h2 { font-size: 22px; }
  .sf-section-cta { margin-top: 24px; }

  /* Hero */
  .sf-hero { padding: 36px 0 40px; }
  .sf-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .sf-hero-title { font-size: 28px; letter-spacing: -0.4px; margin-bottom: 14px; }
  .sf-hero-sub { font-size: 14.5px; margin-bottom: 22px; max-width: 100%; }
  .sf-hero-visual { display: none; }
  .sf-hero-btns { gap: 10px; }
  .sf-hero-btn-primary,
  .sf-hero-btn-secondary { font-size: 14px; padding: 12px 22px; }

  /* Stats */
  .sf-stats-bar { padding: 22px 0; }
  .sf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-stat { padding: 12px 16px; }
  .sf-stat-num { font-size: 28px; }
  .sf-stat-lbl { font-size: 12px; }

  /* Category grid */
  .sf-home-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sf-home-cat-body { padding: 14px 16px 18px; }
  .sf-home-cat-body h3 { font-size: 15px !important; }

  /* Promise */
  .sf-promise-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sf-promise-card { padding: 20px 16px; }
  .sf-promise-icon { font-size: 32px; margin-bottom: 10px; }
  .sf-promise-card h3 { font-size: 14px !important; }
  .sf-promise-card p { font-size: 12.5px; }

  /* Blog */
  .sf-blog-grid { grid-template-columns: 1fr; gap: 14px; }

  /* CTA Banner */
  .sf-cta-banner-inner { flex-direction: column; text-align: center; gap: 18px; }
  .sf-cta-banner-text h2 { font-size: 20px !important; }

  /* Float buttons */
  #sf-float { bottom: 20px; right: 14px; gap: 8px; }
  #sf-float a { width: 46px; height: 46px; }

  /* ── Shop page mobile ── */
  .sf-page-hero { padding: 20px 0 16px; margin-bottom: 20px; }
  .sf-page-hero h1 { font-size: 20px; margin-bottom: 4px; }
  .sf-page-hero p { font-size: 13px; }

  /* Shop meta: xếp dọc trên mobile */
  .sf-shop-meta { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
  .woocommerce-ordering { width: 100%; }
  .woocommerce-ordering select { width: 100%; padding: 9px 12px; font-size: 13px; border-radius: 8px; }

  /* Cat tabs: hint text ẩn bớt, tabs gọn hơn */
  .sf-cat-tabs-wrap { margin-bottom: 18px; }
  .sf-cat-hint { font-size: 11px; margin-bottom: 8px; }
  .sf-cat-tab { font-size: 12px; padding: 7px 14px; }

  /* Breadcrumb gọn */
  .sf-breadcrumb { font-size: 11.5px; padding: 6px 0 10px; }
}

/* ─── 480px — Small Mobile ───────────── */
@media (max-width: 480px) {
  .sf-container { padding: 0 14px; }

  /* Product grid */
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Category shortcode */
  .sfood-cat-grid { grid-template-columns: 1fr; }

  /* Hero */
  .sf-hero { padding: 28px 0 32px; }
  .sf-hero-badge { font-size: 11px; padding: 5px 14px; margin-bottom: 14px; }
  .sf-hero-title { font-size: 24px; margin-bottom: 12px; }
  .sf-hero-sub { font-size: 13.5px; margin-bottom: 18px; }
  .sf-hero-btns { flex-direction: column; gap: 10px; }
  .sf-hero-btn-primary,
  .sf-hero-btn-secondary { text-align: center; font-size: 14px; padding: 13px 20px; }

  /* Stats */
  .sf-stat-num { font-size: 24px; }
  .sf-stat-num span { font-size: 16px; }
  .sf-stat-lbl { font-size: 11px; }

  /* Section */
  .sf-section-head h2 { font-size: 20px; }
  .sf-home-cats,
  .sf-home-featured,
  .sf-home-blog { padding: 32px 0; }
  .sf-home-promise { padding: 36px 0; }
  .sf-home-cta-banner { padding: 28px 0; }

  /* Category grid */
  .sf-home-cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sf-home-cat-body { padding: 10px 12px 14px; }
  .sf-home-cat-body h3 { font-size: 13px !important; }
  .sf-home-cat-count { font-size: 11px; }
  .sf-home-cat-link { font-size: 11px; margin-top: 6px; }

  /* Promise */
  .sf-promise-grid { grid-template-columns: 1fr; }

  /* Footer */
  .sf-footer { padding: 36px 0 0; }

  /* Float */
  #sf-float { bottom: 16px; right: 12px; }
  #sf-float a { width: 44px; height: 44px; }

  /* ── Shop page 480px ── */
  .sf-page-hero { padding: 16px 0 12px; }
  .sf-page-hero h1 { font-size: 18px; }

  /* Product card: font nhỏ hơn cho 2-cột chật */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12.5px !important;
    padding: 8px 10px 3px !important;
    -webkit-line-clamp: 2 !important;
  }
  .woocommerce ul.products li.product .price {
    font-size: 13px !important;
    padding: 2px 10px 6px !important;
  }
  .sf-view-btn {
    margin: 2px 10px 10px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Pagination compact */
  .woocommerce-pagination { margin: 24px 0 0; }
  .woocommerce-pagination ul { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .woocommerce-pagination ul li a,
  .woocommerce-pagination ul li span { width: 32px; height: 32px; font-size: 12px; border-radius: 6px; }

  /* Shop meta */
  .sf-shop-meta .woocommerce-result-count { font-size: 12px; }
  .woocommerce-ordering select { font-size: 12px; }
}

/* ─── WHP Plugin: ẩn hoàn toàn ─── */
#mb-whp-contact { display: none !important; }

/* ─── 375px — Extra Small ────────────── */
@media (max-width: 375px) {
  .sf-container { padding: 0 12px; }
  .sf-hero-title { font-size: 22px; }
  .sf-stat-num { font-size: 22px; }
  .sf-home-cat-grid { gap: 8px; }
  .sf-home-cat-body h3 { font-size: 12px !important; }
  .sf-hero-btn-primary,
  .sf-hero-btn-secondary { padding: 12px 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   BLOG / TIN TỨC — LAYOUT KIỂU BÁO
══════════════════════════════════════════════════════ */
.sf-blog-main { background: var(--sf-bg); padding-bottom: 60px; }

.sf-blog-header {
  text-align: center;
  padding: 48px 0 36px;
  border-bottom: 2px solid var(--sf-border);
  margin-bottom: 40px;
}
.sf-blog-page-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--sf-green);
  margin-bottom: 8px;
}
.sf-blog-page-sub {
  color: var(--sf-muted);
  font-size: 15px;
}

/* ── Category badge & label ── */
.sf-news-cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--sf-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  z-index: 2;
}
.sf-news-cat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 8px;
}
.sf-news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sf-muted);
  margin-top: 12px;
  flex-wrap: wrap;
}
.sf-news-meta.small { font-size: 12px; margin-top: 8px; }
.sf-news-dot { color: #ccc; }
.sf-news-read-more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-green);
}
.sf-news-read-more:hover { text-decoration: underline; }

.sf-news-img-placeholder {
  background: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
}
.sf-news-img-placeholder span { font-size: 48px; opacity: 0.4; }
.sf-news-img-placeholder.small span { font-size: 32px; }

/* ── HERO ── */
.sf-news-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sf-shadow);
  margin-bottom: 28px;
  min-height: 380px;
}
.sf-news-hero-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}
.sf-news-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sf-news-hero:hover .sf-news-hero-img-wrap img { transform: scale(1.04); }
.sf-news-hero-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sf-news-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 12px;
}
.sf-news-hero-title a { color: var(--sf-text); }
.sf-news-hero-title a:hover { color: var(--sf-green); }
.sf-news-hero-excerpt {
  color: var(--sf-muted);
  font-size: 14px;
  line-height: 1.7;
  flex: 1;
}

/* ── SECONDARY 2 cột ── */
.sf-news-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.sf-news-sec-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sf-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.sf-news-sec-card:hover {
  box-shadow: var(--sf-shadow-hover);
  transform: translateY(-3px);
}
.sf-news-sec-img {
  position: relative;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}
.sf-news-sec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.sf-news-sec-card:hover .sf-news-sec-img img { transform: scale(1.05); }
.sf-news-sec-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sf-news-sec-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sf-text);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-news-sec-excerpt {
  font-size: 13px;
  color: var(--sf-muted);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── DIVIDER ── */
.sf-news-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.sf-news-divider::before,
.sf-news-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sf-border);
}
.sf-news-divider span {
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* ── GRID 3 cột ── */
.sf-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.sf-news-grid-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sf-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.sf-news-grid-card:hover {
  box-shadow: var(--sf-shadow-hover);
  transform: translateY(-3px);
}
.sf-news-grid-img {
  position: relative;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.sf-news-grid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.sf-news-grid-card:hover .sf-news-grid-img img { transform: scale(1.05); }
.sf-news-grid-body {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sf-news-grid-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sf-text);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-news-grid-title:hover { color: var(--sf-green); }
.sf-news-grid-excerpt {
  font-size: 12px;
  color: var(--sf-muted);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ── Phân trang ── */
.sf-news-pagination {
  text-align: center;
  margin: 8px 0 24px;
}
.sf-news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text);
  background: #fff;
  border: 1px solid var(--sf-border);
  margin: 0 3px;
  transition: all 0.2s;
}
.sf-news-pagination .page-numbers:hover,
.sf-news-pagination .page-numbers.current {
  background: var(--sf-green);
  color: #fff;
  border-color: var(--sf-green);
}
.sf-news-pagination .page-numbers.prev,
.sf-news-pagination .page-numbers.next {
  width: auto;
  padding: 0 14px;
}

/* ── Empty ── */
.sf-news-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--sf-muted);
}
.sf-news-empty span { font-size: 48px; display: block; margin-bottom: 16px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sf-news-hero { grid-template-columns: 1.3fr 1fr; }
  .sf-news-hero-title { font-size: 19px; }
  .sf-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sf-news-hero { grid-template-columns: 1fr; min-height: auto; }
  .sf-news-hero-img-wrap { height: 240px; }
  .sf-news-hero-body { padding: 20px; }
  .sf-news-hero-title { font-size: 18px; }
  .sf-news-secondary { grid-template-columns: 1fr; gap: 16px; }
  .sf-news-sec-img { height: 180px; }
  .sf-news-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sf-news-grid-img { height: 140px; }
  .sf-blog-header { padding: 32px 0 24px; }
  .sf-blog-page-title { font-size: 24px; }
}
@media (max-width: 480px) {
  .sf-news-grid { grid-template-columns: 1fr; }
  .sf-news-grid-img { height: 180px; }
}

/* ─── 375px — Extra Small ────────────── */
@media (max-width: 375px) {
  .sf-container { padding: 0 12px; }
  .sf-hero-title { font-size: 22px; }
  .sf-stat-num { font-size: 22px; }
  .sf-home-cat-grid { gap: 8px; }
  .sf-home-cat-body h3 { font-size: 12px !important; }
  .sf-hero-btn-primary,
  .sf-hero-btn-secondary { padding: 12px 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY V2 — MONTSERRAT (inspired by DH Foods)
   Uppercase headings · wider letter-spacing · weight contrast
══════════════════════════════════════════════════════ */

/* --- Font variable --- */
:root {
  --sf-font: 'Montserrat', 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

/* --- Base body --- */
body {
  font-family: var(--sf-font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
}
*, button, input, select, textarea { font-family: inherit; }

/* --- Global headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font);
  font-weight: 800;
  line-height: 1.2;
}

/* ── PAGE / SECTION TITLES → UPPERCASE (như DH Foods) ── */
.sf-hero-title,
.sf-section-title,
.sf-blog-page-title,
.woocommerce-products-header__title,
h1.page-title,
.page-title,
.entry-title,
.product_title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero */
.sf-hero-title {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Section headers */
.sf-section-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.07em;
}

/* Blog archive title */
.sf-blog-page-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

/* Subtitle / mô tả phụ */
.sf-hero-sub,
.sf-blog-page-sub,
.sf-section-sub {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
}

/* ── CARD / PRODUCT TITLES (listing) → Title case, NOT uppercase ── */
.woocommerce-loop-product__title,
h2.woocommerce-loop-product__title,
.sf-news-hero-title,
.sf-news-sec-title,
.sf-news-grid-title {
  text-transform: none;
  letter-spacing: -0.01em;
}
.sf-news-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
}
.sf-news-sec-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.sf-news-grid-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}
.woocommerce-loop-product__title {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── NAVIGATION ── */
.sf-nav a,
.sf-nav-link,
.sf-nav > ul > li > a,
.sf-header nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── BUTTONS ── */
.sf-hero-btn-primary,
.sf-hero-btn-secondary,
.sf-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type=submit],
.button, button[type=submit],
.sf-search-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* ── CATEGORY BADGES & LABELS ── */
.sf-news-cat-badge,
.sf-news-cat-label,
.sf-cat-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── FILTER TABS / TAGS ── */
.sf-filter-btn,
.sf-cat-filter a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ── META (author, date) ── */
.sf-news-meta,
.sf-news-date,
.sf-news-author,
.sf-news-dot {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── CATEGORY GRID TITLES ── */
.sf-home-cat-body h3 {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── STAT NUMBERS ── */
.sf-stat-num {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.sf-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── FOOTER ── */
.sf-footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sf-footer-link,
.sf-footer p {
  font-size: 13px;
  font-weight: 400;
}

/* ── WOOCOMMERCE PRICE ── */
.woocommerce .price,
.woocommerce-Price-amount {
  font-family: var(--sf-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── PAGINATION ── */
.sf-news-pagination .page-numbers {
  font-size: 13px;
  font-weight: 700;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .sf-hero-title  { font-size: 1.75rem; }
  .sf-section-title { font-size: 1.4rem; }
  .sf-blog-page-title { font-size: 1.6rem; }
  .sf-news-hero-title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .sf-hero-title  { font-size: 1.5rem; }
  .sf-section-title { font-size: 1.25rem; letter-spacing: 0.04em; }
  .sf-news-hero-title { font-size: 1.1rem; }
}

/* Mobile logo: bigger + centered */
@media (max-width: 768px) {
  .sf-header-inner { position: relative; justify-content: flex-end; }
  .sf-logo { position: absolute; left: 50%; transform: translateX(-50%); flex: none; }
  .sf-logo img { height: 72px; }
}

/* Mobile logo: centered in flow, no overlap */
@media (max-width: 768px) {
  .sf-header-inner { position: static; justify-content: space-between; }
  .sf-logo { position: static; transform: none; left: auto; flex: 1; display: flex; justify-content: center; align-items: center; order: 2; }
  .sf-logo img { height: 70px; }
  .sf-header-actions { order: 1; flex: 0 0 auto; margin-left: 0; }
  .sf-hamburger { order: 3; flex: 0 0 auto; }
  .sf-search { order: 4; }
}

/* ==== BLOG MOBILE v1.1.9 ==== */
@media(max-width:900px){.sf-news-hero{grid-template-columns:1fr;}.sf-news-hero-img{height:220px;}}
@media(max-width:768px){.sf-news-secondary{grid-template-columns:1fr;gap:16px;}.sf-news-sec-card{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;}.sf-news-sec-img{height:90px;border-radius:8px;}.sf-news-sec-title{font-size:.9rem;}.sf-news-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:520px){.sf-news-grid{grid-template-columns:1fr;}.sf-news-sec-card{grid-template-columns:100px 1fr;}}

/* ==== MOBILE PRODUCT CARDS v1.2.0 ==== */
@media(max-width:768px){
  .sf-home-featured ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
  .sf-home-featured ul.products li.product,
  .woocommerce ul.products li.product{
    padding:10px 10px 12px!important;
    border-radius:10px!important;
  }
  .sf-home-featured ul.products li.product img,
  .woocommerce ul.products li.product img{
    height:130px!important;
    object-fit:contain!important;
    margin-bottom:8px!important;
  }
  .woocommerce-loop-product__title{
    font-size:.8rem!important;
    line-height:1.35!important;
    min-height:2.7em!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    margin-bottom:4px!important;
  }
  .woocommerce ul.products li.product .price{
    font-size:.82rem!important;
    margin-bottom:8px!important;
    display:block!important;
  }
  .woocommerce ul.products li.product .sf-product-actions,
  .woocommerce ul.products li.product .button-group{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce ul.products li.product a.button{
    font-size:.75rem!important;
    padding:7px 6px!important;
    width:100%!important;
    text-align:center!important;
    border-radius:6px!important;
  }
  .woocommerce ul.products li.product .sf-btn-detail,
  .woocommerce ul.products li.product a.sf-view-detail{
    font-size:.72rem!important;
    padding:6px 6px!important;
    width:100%!important;
    text-align:center!important;
  }
}
@media(max-width:360px){
  .sf-home-featured ul.products,
  .woocommerce ul.products{
    grid-template-columns:1fr!important;
  }
}

/* ==== MOBILE PRODUCT CARDS v1.2.1 (correct selectors) ==== */
@media(max-width:768px){
  .sf-home-featured ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
  .sf-product-card{
    padding:10px 10px 12px!important;
    border-radius:12px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .sf-product-card img{
    height:130px!important;
    object-fit:contain!important;
    margin-bottom:8px!important;
  }
  .sf-product-card .woocommerce-loop-product__title{
    font-size:.8rem!important;
    line-height:1.35!important;
    min-height:2.1em!important;
    max-height:2.7em!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    margin-bottom:4px!important;
  }
  .sf-product-card .price{
    font-size:.82rem!important;
    margin-bottom:8px!important;
  }
  .sf-add-cart-btn{
    font-size:.72rem!important;
    padding:7px 4px!important;
    width:100%!important;
    text-align:center!important;
    border-radius:6px!important;
    margin-bottom:5px!important;
  }
  .sf-view-btn{
    font-size:.7rem!important;
    padding:6px 4px!important;
    width:100%!important;
    text-align:center!important;
    border-radius:6px!important;
    display:block!important;
  }
}
@media(max-width:360px){
  .sf-home-featured ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{
    grid-template-columns:1fr!important;
  }
}

/* ==== FOOTER MOBILE CENTER v1.2.2 ==== */
@media(max-width:768px){
  .sf-footer-brand{text-align:center!important;}
  .sf-footer-logo{display:block!important;margin:0 auto 12px!important;}
  .sf-footer-brand p{text-align:center!important;}
  .sf-footer-brand .sf-footer-social{justify-content:center!important;}
}

/* ==== MOBILE IMAGE FIX v1.2.3 ==== */
@media(max-width:768px){
  .woocommerce-product-gallery{
    width:100%!important;max-width:100%!important;float:none!important;margin-bottom:20px!important;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__image,
  .woocommerce-product-gallery .flex-viewport{
    max-height:320px!important;overflow:hidden!important;border-radius:12px!important;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery .flex-viewport img{
    max-height:320px!important;width:100%!important;object-fit:contain!important;background:#f8f8f8;
  }
  .woocommerce div.product{display:block!important;}
  .woocommerce div.product .summary.entry-summary{width:100%!important;float:none!important;margin-top:0!important;}
  .woocommerce-Tabs-panel img,
  .wc-tab img,
  .entry-content img,
  .woocommerce-product-details__short-description img{
    max-width:100%!important;height:auto!important;max-height:280px!important;
    object-fit:contain!important;display:block!important;margin:8px auto!important;border-radius:8px!important;
  }
  .single-post .entry-content img,
  .single .entry-content img{
    max-width:100%!important;height:auto!important;max-height:300px!important;
    object-fit:contain!important;display:block!important;margin:8px auto!important;
  }
}

/* ==== HIDE XEM CHI TIET v1.2.4 ==== */
.sf-view-btn{display:none!important;}

/* ==== CENTER PRODUCT CARD v1.2.5 ==== */
.sf-product-card,
.woocommerce ul.products li.product{
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
.woocommerce ul.products li.product .sf-card-img,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  display:block!important;
  margin:0 auto!important;
  object-fit:contain!important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  text-align:center!important;
  width:100%!important;
}
.woocommerce ul.products li.product .price{
  text-align:center!important;
  width:100%!important;
  display:block!important;
}
.woocommerce ul.products li.product .sf-add-cart-btn,
.woocommerce ul.products li.product .add_to_cart_button{
  width:100%!important;
  text-align:center!important;
  justify-content:center!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}

/* ==== MOBILE DRAWER v1.2.6 ==== */
.sf-mobile-drawer{display:none;}
@media(max-width:768px){
.sf-nav{display:none!important;}
.sf-mobile-drawer{display:block;position:fixed;inset:0;z-index:9999;pointer-events:none;}
.sf-mobile-drawer.sf-open{pointer-events:all;}
.sf-drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;}
.sf-mobile-drawer.sf-open .sf-drawer-overlay{opacity:1;}
.sf-drawer-panel{position:absolute;top:0;right:0;width:82%;max-width:300px;height:100%;background:#fff;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;display:flex;flex-direction:column;}
.sf-mobile-drawer.sf-open .sf-drawer-panel{transform:translateX(0);}
.sf-drawer-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#555;padding:4px 8px;z-index:1;}
.sf-drawer-user{background:#1a5c2e;color:#fff;padding:20px 16px 14px;}
.sf-drawer-hello{margin:0 0 8px;font-size:.88rem;color:rgba(255,255,255,.85);}
.sf-drawer-hello-guest{margin:0 0 10px;font-size:.9rem;color:#fff;font-weight:600;}
.sf-drawer-user-links{display:flex;flex-direction:column;}
.sf-drawer-user-links a{color:#fff;text-decoration:none;font-size:.85rem;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.sf-drawer-auth{display:flex;gap:8px;margin-top:4px;}
.sf-drawer-btn{flex:1;text-align:center;padding:9px 4px;border-radius:7px;font-size:.85rem;font-weight:700;text-decoration:none;}
.sf-drawer-login{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);}
.sf-drawer-register{background:#f5a623;color:#fff;}
.sf-drawer-cart{display:flex;align-items:center;gap:8px;padding:14px 16px;background:#f0faf4;border-bottom:1px solid #e0e8e0;font-weight:700;color:#1a5c2e;text-decoration:none;font-size:.92rem;}
.sf-drawer-badge{background:#e53e3e;color:#fff;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;margin-left:auto;}
.sf-drawer-sec{border-bottom:1px solid #eee;}
.sf-drawer-sec-hd{width:100%;background:none;border:none;padding:13px 16px;text-align:left;font-size:.9rem;font-weight:700;color:#1a3a1a;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.sf-daro{font-size:1.1rem;color:#888;transition:transform .25s;display:inline-block;}
.sf-drawer-sub{display:none;list-style:none;margin:0;padding:0 0 6px;background:#f9f9f9;}
.sf-drawer-sub.sf-open{display:block;}
.sf-drawer-sub li a{display:block;padding:9px 16px 9px 22px;color:#333;text-decoration:none;font-size:.84rem;border-bottom:1px solid #f0f0f0;}
.sf-drawer-sub li.sf-drawer-all a{color:#1a5c2e;font-weight:700;}
.sf-drawer-links{margin-top:auto;border-top:1px solid #eee;}
.sf-drawer-links a{display:block;padding:13px 16px;color:#222;text-decoration:none;font-size:.88rem;border-bottom:1px solid #f5f5f5;}
}

/* ==== PRODUCT PAGE v1.2.7 ==== */

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-size:.82rem;color:#888;padding:10px 0 6px;
}
.woocommerce-breadcrumb a {color:#1a5c2e;text-decoration:none;}
.woocommerce-breadcrumb a:hover {text-decoration:underline;}

/* Product title */
.single-product .product_title {
  font-size:1.65rem;font-weight:800;line-height:1.3;
  color:#1a3a1a;margin-bottom:10px;
}

/* Price */
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
  font-size:1.55rem;font-weight:800;color:#e8420a;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size:.95rem;line-height:1.75;color:#444;
  margin:12px 0 16px;padding:12px 16px;
  background:#f5fdf7;border-left:3px solid #1a5c2e;
  border-radius:0 6px 6px 0;
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .cart .button {
  background:#1a5c2e!important;color:#fff!important;
  border:none!important;border-radius:8px!important;
  font-size:1rem!important;font-weight:700!important;
  padding:14px 28px!important;letter-spacing:.4px!important;
  transition:background .2s!important;cursor:pointer!important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product .cart .button:hover {
  background:#145024!important;
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
  border:2px solid #1a5c2e!important;border-radius:6px!important;
  font-size:1rem!important;height:46px!important;width:64px!important;
  text-align:center!important;
}

/* Gallery — desktop rounded shadow */
.woocommerce-product-gallery {
  border-radius:12px;overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}
.woocommerce-product-gallery__image img {
  border-radius:12px;width:100%;
  object-fit:cover;
}

/* Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs {
  margin-top:8px;gap:6px;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius:6px;border:2px solid transparent;
  transition:border .2s;cursor:pointer;opacity:.75;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color:#1a5c2e;opacity:1;
}

/* Trust badges */
.sf-trust-badges {
  display:flex;flex-wrap:wrap;gap:8px;
  margin:14px 0;padding:12px;
  background:#f9fdf5;border-radius:8px;
  border:1px solid #d4edda;
}
.sf-trust-badges span {
  font-size:.8rem;color:#2d6a4f;font-weight:600;
  display:flex;align-items:center;gap:4px;
}

/* Product meta */
.woocommerce div.product .product_meta {
  font-size:.85rem;color:#666;
  border-top:1px solid #eee;padding-top:12px;margin-top:12px;
}

/* Tabs */
.woocommerce-tabs ul.tabs {
  border-bottom:2px solid #1a5c2e!important;
  padding-left:0!important;margin-bottom:0!important;
}
.woocommerce-tabs ul.tabs li {
  border-radius:6px 6px 0 0!important;
  border:2px solid #ddd!important;border-bottom:none!important;
  background:#f9f9f9!important;
}
.woocommerce-tabs ul.tabs li.active {
  background:#1a5c2e!important;border-color:#1a5c2e!important;
}
.woocommerce-tabs ul.tabs li.active a {color:#fff!important;}
.woocommerce-tabs ul.tabs li a {
  color:#333!important;font-weight:600!important;font-size:.9rem!important;
}
.woocommerce-tabs .panel {
  padding:20px 16px!important;
  border:1px solid #eee!important;border-top:none!important;
  border-radius:0 0 8px 8px!important;
}

/* Related products heading */
.related.products > h2 {
  font-size:1.25rem;font-weight:800;color:#1a3a1a;
  border-bottom:2px solid #1a5c2e;padding-bottom:8px;margin-bottom:20px;
}

/* ==== MOBILE single product ==== */
@media(max-width:768px){
  .woocommerce div.product div.images {
    width:100%!important;float:none!important;margin-bottom:16px!important;
  }
  .woocommerce div.product div.summary {
    width:100%!important;float:none!important;
  }
  .woocommerce-product-gallery__image img {
    max-height:300px!important;object-fit:contain!important;
    border-radius:8px!important;
  }
  .single-product .product_title {
    font-size:1.2rem!important;
  }
  .woocommerce div.product form.cart {
    display:flex!important;flex-wrap:wrap!important;
    gap:8px!important;align-items:center!important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex:1!important;text-align:center!important;min-width:160px!important;
  }
  /* Sticky buy bar */
  .sf-sticky-buy {
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9998;
    background:#1a5c2e;color:#fff!important;padding:14px 20px;
    text-align:center;font-weight:700;font-size:1rem;
    text-decoration:none;box-shadow:0 -2px 16px rgba(0,0,0,.18);
    align-items:center;justify-content:center;gap:8px;
    border-top:3px solid #f5a623;
  }
  body.single-product {padding-bottom:64px;}
  .woocommerce-product-gallery .flex-control-thumbs li {
    width:18%!important;
  }
}
@media(min-width:769px){
  .sf-sticky-buy{display:none!important;}
}

/* ==== PRODUCT PAGE v1.2.8 — padding & desktop ==== */

/* ── Mobile: padding 2 bên ── */
@media (max-width: 768px) {

  /* Gallery full-width nhưng có padding nhỏ */
  .single-product .woocommerce-product-gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  /* Summary (title, price, button) — padding 16px 2 bên */
  .single-product div.product div.summary {
    padding: 16px 16px 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumb */
  .woocommerce-breadcrumb {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    color: #888 !important;
  }

  /* Tabs & related */
  .woocommerce-tabs,
  .related.products,
  .up-sells.upsells.products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Mô tả ngắn */
  .woocommerce-product-details__short-description {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #444 !important;
    border-left: 3px solid #1a5c2e;
    padding-left: 12px !important;
    margin-bottom: 16px !important;
  }

  /* Quantity + button row */
  .woocommerce div.product form.cart {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }

  .woocommerce div.product form.cart .qty {
    width: 60px !important;
    min-width: 60px !important;
    border: 2px solid #1a5c2e !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    padding: 14px 12px !important;
  }

  /* Sticky bar text */
  .sf-sticky-buy {
    font-size: 0.95rem !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 8px !important;
  }

  /* Tab navigation */
  .woocommerce-tabs ul.tabs li a {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
  }
}

/* ── Desktop: layout 2 cột đẹp hơn ── */
@media (min-width: 769px) {

  /* Container sản phẩm tối đa width */
  .single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }

  /* Gallery chiếm cột trái */
  .single-product div.product div.images {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
  }

  /* Summary chiếm cột phải */
  .single-product div.product div.summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
    padding: 8px 0 0 0 !important;
  }

  /* Tabs & related — full width bên dưới */
  .single-product .woocommerce-tabs,
  .single-product .related.products,
  .single-product .up-sells {
    grid-column: 1 / -1 !important;
  }

  /* Mô tả ngắn desktop */
  .woocommerce-product-details__short-description {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #444 !important;
    border-left: 3px solid #1a5c2e;
    padding-left: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Quantity + button */
  .woocommerce div.product form.cart {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .woocommerce div.product form.cart .qty {
    width: 70px !important;
    border: 2px solid #1a5c2e !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  /* Gallery thumbnail strip */
  .flex-control-thumbs li img {
    border-radius: 6px !important;
    border: 2px solid transparent !important;
    transition: border-color .2s !important;
  }
  .flex-control-thumbs li img:hover,
  .flex-control-thumbs li img.flex-active {
    border-color: #1a5c2e !important;
  }

  /* Hover effect on add-to-cart */
  .woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #0f3d1e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26,92,46,.35) !important;
    transition: all .2s !important;
  }
}

/* ==== PRODUCT PAGE v1.2.8 — padding & desktop ==== */

/* ── Mobile: padding 2 bên ── */
@media (max-width: 768px) {

  /* Gallery full-width nhưng có padding nhỏ */
  .single-product .woocommerce-product-gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  /* Summary (title, price, button) — padding 16px 2 bên */
  .single-product div.product div.summary {
    padding: 16px 16px 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumb */
  .woocommerce-breadcrumb {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    color: #888 !important;
  }

  /* Tabs & related */
  .woocommerce-tabs,
  .related.products,
  .up-sells.upsells.products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Mô tả ngắn */
  .woocommerce-product-details__short-description {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #444 !important;
    border-left: 3px solid #1a5c2e;
    padding-left: 12px !important;
    margin-bottom: 16px !important;
  }

  /* Quantity + button row */
  .woocommerce div.product form.cart {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }

  .woocommerce div.product form.cart .qty {
    width: 60px !important;
    min-width: 60px !important;
    border: 2px solid #1a5c2e !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    padding: 14px 12px !important;
  }

  /* Sticky bar text */
  .sf-sticky-buy {
    font-size: 0.95rem !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 8px !important;
  }

  /* Tab navigation */
  .woocommerce-tabs ul.tabs li a {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
  }
}

/* ── Desktop: layout 2 cột đẹp hơn ── */
@media (min-width: 769px) {

  /* Container sản phẩm tối đa width */
  .single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }

  /* Gallery chiếm cột trái */
  .single-product div.product div.images {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
  }

  /* Summary chiếm cột phải */
  .single-product div.product div.summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: 100% !important;
    padding: 8px 0 0 0 !important;
  }

  /* Tabs & related — full width bên dưới */
  .single-product .woocommerce-tabs,
  .single-product .related.products,
  .single-product .up-sells {
    grid-column: 1 / -1 !important;
  }

  /* Mô tả ngắn desktop */
  .woocommerce-product-details__short-description {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #444 !important;
    border-left: 3px solid #1a5c2e;
    padding-left: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Quantity + button */
  .woocommerce div.product form.cart {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .woocommerce div.product form.cart .qty {
    width: 70px !important;
    border: 2px solid #1a5c2e !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  /* Gallery thumbnail strip */
  .flex-control-thumbs li img {
    border-radius: 6px !important;
    border: 2px solid transparent !important;
    transition: border-color .2s !important;
  }
  .flex-control-thumbs li img:hover,
  .flex-control-thumbs li img.flex-active {
    border-color: #1a5c2e !important;
  }

  /* Hover effect on add-to-cart */
  .woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #0f3d1e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26,92,46,.35) !important;
    transition: all .2s !important;
  }
}