@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   HƯƠNG VỊ DI SẢN — Additional CSS (Home Page)
   Dán toàn bộ nội dung này vào:
   Appearance > Customize > Additional CSS
   ============================================================ */

/* ----------------------------------------------------------
   1. BIẾN MÀU & FONT TOÀN CỤC
   ---------------------------------------------------------- */
:root {
  --hvds-font:      'Be Vietnam Pro', sans-serif;
  --hvds-primary:   #0f172a;   /* Navy đậm                  */
  --hvds-accent:    #b45309;   /* Amber / di sản            */
  --hvds-gold:      #d97706;   /* Vàng nhạt hơn             */
  --hvds-ocean:     #0ea5e9;   /* Xanh biển Hạ Long         */
  --hvds-bg-soft:   #f8fafc;   /* Nền sáng                  */
  --hvds-bg-warm:   #fffbf5;   /* Nền ấm                    */
  --hvds-text:      #1e293b;
  --hvds-muted:     #64748b;
  --hvds-radius:    16px;
  --hvds-shadow:    0 8px 32px rgba(15,23,42,0.10);
  --hvds-shadow-sm: 0 4px 16px rgba(15,23,42,0.07);
  --hvds-transition: 0.3s cubic-bezier(.4,0,.2,1);
}

/* ----------------------------------------------------------
   1b. FONT TOÀN CỤC — TIẾNG VIỆT
   ---------------------------------------------------------- */
html, body,
body *:not(.dashicons):not([class*="fa-"]):not([class*="icon"]) {
  font-family: var(--hvds-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   2. HERO SECTION
   ---------------------------------------------------------- */
/* Wrapper chứa hero (group đầu tiên) */
main.wp-block-group > .wp-block-group.alignfull:first-of-type {
  position: relative;
  background: linear-gradient(135deg, var(--hvds-bg-warm) 0%, #e0f2fe 100%);
  overflow: hidden;
}

main.wp-block-group > .wp-block-group.alignfull:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(14,165,233,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(180,83,9,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Tiêu đề h1 */
main .wp-block-group.alignfull:first-of-type h1.wp-block-heading {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--hvds-primary);
  background: linear-gradient(135deg, var(--hvds-primary) 30%, var(--hvds-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Đoạn mô tả hero */
main .wp-block-group.alignfull:first-of-type p.has-text-align-center {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--hvds-muted);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

/* Nút CTA chính "Đặt bàn ngay" */
main .wp-block-group.alignfull:first-of-type .wp-block-button__link {
  background: var(--hvds-primary) !important;
  color: #fff !important;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(15,23,42,0.25);
  transition: all var(--hvds-transition);
}

main .wp-block-group.alignfull:first-of-type .wp-block-button__link:hover {
  background: var(--hvds-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(180,83,9,0.35);
}

/* ----------------------------------------------------------
   3. METASLIDER
   ---------------------------------------------------------- */

/* Container slider homepage */
.home .metaslider {
  max-width: 1200px !important;
  width: 88%;
  margin: 30px auto !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Giảm chiều cao ảnh */
.home .metaslider .slides img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.55s ease;
}

/* Nút điều hướng gọn hơn */
.home .metaslider .flex-direction-nav a {
  transform: scale(0.8);
  opacity: 0.75;
  transition: all var(--hvds-transition);
}
.home .metaslider .flex-direction-nav a:hover {
  opacity: 1;
  transform: scale(0.92);
}

/* Hover: zoom nhẹ trên ảnh */
.home .metaslider .slides li {
  overflow: hidden;
}
.home .metaslider .slides li:hover img {
  transform: scale(1.05);
}

/* Dots / pager */
.home .metaslider .flex-control-paging li a {
  background: rgba(15,23,42,0.25);
  transition: background var(--hvds-transition);
}
.home .metaslider .flex-control-paging li a.flex-active,
.home .metaslider .flex-control-paging li a:hover {
  background: var(--hvds-accent);
}

/* ---------- LIGHTBOX (bật trong MetaSlider Settings) ---------- */
.mfp-bg,
.fancybox-overlay,
.metaslider-lightbox-overlay {
  background: rgba(15,23,42,0.90) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

.mfp-img,
.fancybox-image {
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;
  max-height: 88vh !important;
  object-fit: contain !important;
}

.mfp-close,
.fancybox-close {
  background: var(--hvds-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 1.1rem !important;
  opacity: 1 !important;
  transition: background var(--hvds-transition) !important;
}
.mfp-close:hover,
.fancybox-close:hover {
  background: var(--hvds-primary) !important;
}

.mfp-title,
.fancybox-title {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  margin-top: 10px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .home .metaslider {
    width: 95%;
    border-radius: 14px;
  }

  .home .metaslider .slides img {
    height: 220px !important;
  }
}

/* ----------------------------------------------------------
   4. BACK-TO-TOP BUTTON
   ---------------------------------------------------------- */
#makeiteasy-back-to-top .wp-block-button__link {
  background: var(--hvds-accent) !important;
  box-shadow: 0 4px 16px rgba(180,83,9,0.40) !important;
  transition: all 0.7s cubic-bezier(.4,0,.2,1) !important;
}

#makeiteasy-back-to-top .wp-block-button__link:hover {
  background: var(--hvds-primary) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.30) !important;
}

/* ----------------------------------------------------------
   5. FEATURE GRID — SECTION "TRẢI NGHIỆM"
   ---------------------------------------------------------- */
/* Nền section */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type {
  background: var(--hvds-bg-soft) !important;
  position: relative;
}

main .wp-block-group.alignfull.has-base-2-background-color:first-of-type::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hvds-accent), var(--hvds-ocean));
}

/* Tiêu đề section "Trải nghiệm" */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type h2.wp-block-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 800;
  color: var(--hvds-primary);
  position: relative;
  display: inline-block;
}

main .wp-block-group.alignfull.has-base-2-background-color:first-of-type h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--hvds-accent);
  border-radius: 4px;
  margin: 10px auto 0;
}

/* Mô tả section */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type > .wp-block-group > p.has-text-align-center {
  font-size: 1.05rem;
  color: var(--hvds-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* Các cột feature */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column {
  background: #fff;
  border-radius: var(--hvds-radius);
  padding: 28px 24px;
  box-shadow: var(--hvds-shadow-sm);
  border: 1px solid rgba(15,23,42,0.06);
  transition: transform var(--hvds-transition), box-shadow var(--hvds-transition);
}

main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column:hover {
  transform: translateY(-6px);
  box-shadow: var(--hvds-shadow);
}

/* Tiêu đề h3 trong feature column */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column h3.wp-block-heading {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--hvds-primary) !important;
  margin-bottom: 10px;
  position: relative;
  padding-left: 14px;
}

main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column h3.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--hvds-accent);
  border-radius: 4px;
}

/* Paragraph trong feature column */
main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column p {
  font-size: 0.95rem !important;
  color: var(--hvds-muted);
  line-height: 1.75;
}

/* ----------------------------------------------------------
   6. CTA "ĐẶT BÀN VỚI CHÚNG TÔI"
   ---------------------------------------------------------- */
/* Outer wrapper */
main .wp-block-group.alignfull:last-of-type {
  background: linear-gradient(135deg, #f0f9ff 0%, var(--hvds-bg-warm) 100%);
}

/* Card bên trong */
main .wp-block-group.alignfull:last-of-type .wp-block-group.alignwide {
  background: linear-gradient(135deg, var(--hvds-primary) 0%, #1e3a5f 100%) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 48px rgba(15,23,42,0.22) !important;
  position: relative;
  overflow: hidden;
}

main .wp-block-group.alignfull:last-of-type .wp-block-group.alignwide::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 70%);
  pointer-events: none;
}

main .wp-block-group.alignfull:last-of-type .wp-block-group.alignwide::after {
  content: "";
  position: absolute;
  bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(180,83,9,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Tiêu đề CTA */
main .wp-block-group.alignfull:last-of-type h2.wp-block-heading {
  color: #fff !important;
  font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
  font-weight: 800;
}

/* Paragraph CTA */
main .wp-block-group.alignfull:last-of-type p.has-text-align-center {
  color: rgba(255,255,255,0.80) !important;
  font-size: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

/* Nút "Đặt bàn" trong CTA */
main .wp-block-group.alignfull:last-of-type .wp-block-button__link {
  background: var(--hvds-accent) !important;
  color: #fff !important;
  padding: 14px 40px !important;
  border-radius: 50px !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 20px rgba(180,83,9,0.45);
  transition: all var(--hvds-transition);
}

main .wp-block-group.alignfull:last-of-type .wp-block-button__link:hover {
  background: var(--hvds-gold) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(217,119,6,0.50);
}

/* ----------------------------------------------------------
   7. LOCATION SECTION (custom HTML block)
   ---------------------------------------------------------- */
.restaurant-location-section {
  max-width: 1100px;
  margin: 64px auto 80px;
  padding: 0 24px;
}

.restaurant-location-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

/* Map */
.restaurant-map-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--hvds-shadow);
  transition: box-shadow var(--hvds-transition);
}

.restaurant-map-wrap:hover {
  box-shadow: 0 16px 40px rgba(15,23,42,0.15);
}

.restaurant-map-wrap iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

/* Info box */
.restaurant-info-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: var(--hvds-shadow);
  border: 1px solid rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
}

.restaurant-info-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hvds-accent), var(--hvds-ocean));
}

.location-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hvds-accent);
  font-weight: 700;
  margin-bottom: 14px;
  padding: 4px 12px;
  background: rgba(180,83,9,0.08);
  border-radius: 50px;
}

.restaurant-info-box h3,
.restaurant-info-box h4 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--hvds-primary);
  line-height: 1.25;
}

.address {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--hvds-muted);
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.97rem;
  color: var(--hvds-text);
  line-height: 1.7;
  padding: 10px 14px;
  background: var(--hvds-bg-soft);
  border-radius: 10px;
}

.info-item strong {
  color: var(--hvds-primary);
  min-width: 110px;
  font-weight: 700;
}

.info-item a {
  color: var(--hvds-accent);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--hvds-transition);
}

.info-item a:hover {
  color: var(--hvds-ocean);
}

.booking-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  background: var(--hvds-primary);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(15,23,42,0.25);
  transition: all var(--hvds-transition);
}

.booking-btn:hover {
  background: var(--hvds-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(180,83,9,0.35);
}

/* ----------------------------------------------------------
   8. RESPONSIVE — TABLET & MOBILE
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .restaurant-location-grid {
    grid-template-columns: 1fr;
  }

  .restaurant-map-wrap iframe {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  /* Hero */
  main .wp-block-group.alignfull:first-of-type h1.wp-block-heading {
    font-size: 2rem !important;
  }

  /* Feature columns: stack vertically */
  main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-columns {
    flex-direction: column !important;
  }

  main .wp-block-group.alignfull.has-base-2-background-color:first-of-type .wp-block-column {
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* Location */
  .restaurant-location-section {
    margin: 40px auto 50px;
  }

  .restaurant-info-box {
    padding: 28px 22px;
  }

  .info-item {
    flex-direction: column;
    gap: 4px;
  }

  .info-item strong {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  /* CTA card */
  main .wp-block-group.alignfull:last-of-type .wp-block-group.alignwide {
    border-radius: 16px !important;
  }

  main .wp-block-group.alignfull:last-of-type h2.wp-block-heading {
    font-size: 1.5rem !important;
  }
}

.is-style-asterisk::before {
    display: none !important;
}
/* CSS mới (gradient tối như ảnh 2) */
main .wp-block-group.alignfull:last-of-type {
    background: linear-gradient(135deg, #3a4f5c 0%, #8fa8a8 100%);
}

/* ===== BOOKING FORM ===== */

.rtb-booking-form {
  max-width: 560px;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10);
  padding: 40px 36px;
  font-family: var(--hvds-font);
  box-sizing: border-box;
}

/* Fieldset */
.rtb-booking-form fieldset {
  border: 1px solid #f0e6d3;
  border-radius: 10px;
  padding: 20px 20px 8px;
  margin: 0 0 24px;
}

/* Legend */
.rtb-booking-form fieldset legend {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 0 10px;
}

/* Label */
.rtb-booking-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Input & Textarea */
.rtb-booking-form input[type="text"],
.rtb-booking-form input[type="email"],
.rtb-booking-form input[type="tel"],
.rtb-booking-form input[type="date"],
.rtb-booking-form input[type="time"],
.rtb-booking-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background: #fafafa;
  transition: border-color 0.25s, box-shadow 0.25s;
  outline: none;
  box-sizing: border-box;
}

/* Select riêng — giới hạn độ rộng */
.rtb-booking-form select {
  width: auto;
  min-width: 100px;
  max-width: 140px;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23999' d='M6 7L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}

/* Focus */
.rtb-booking-form input:focus,
.rtb-booking-form select:focus,
.rtb-booking-form textarea:focus {
  border-color: #c8a96e;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.18);
  background: #fff;
}

/* Từng field */
.rtb-booking-form .rtb-date,
.rtb-booking-form .rtb-time,
.rtb-booking-form .rtb-party,
.rtb-booking-form .rtb-name,
.rtb-booking-form .rtb-email,
.rtb-booking-form .rtb-phone,
.rtb-booking-form .rtb-message {
  margin-bottom: 14px;
}

/* Textarea */
.rtb-booking-form textarea {
  min-height: 80px;
  resize: vertical;
}

/* Link "Thêm tin nhắn" */
.rtb-booking-form .rtb-message a {
  font-size: 13px;
  color: #c8a96e;
  font-weight: 600;
  text-decoration: none;
}
.rtb-booking-form .rtb-message a:hover {
  text-decoration: underline;
}

/* ===== NÚT GỬI ===== */
.rtb-booking-form .rtb-submit {
  margin-top: 8px;
}

.rtb-booking-form .rtb-submit input[type="submit"] {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #c8a96e 0%, #a07840 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(160, 120, 64, 0.40);
  transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s;
}

.rtb-booking-form .rtb-submit input[type="submit"]:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(160, 120, 64, 0.50);
}

.rtb-booking-form .rtb-submit input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(160, 120, 64, 0.35);
}

/* Thông báo */
.rtb-booking-form .rtb-error {
  background: #fff0f0;
  color: #c0392b;
  border-left: 4px solid #e74c3c;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.rtb-booking-form .rtb-success {
  background: #f0fff4;
  color: #27ae60;
  border-left: 4px solid #2ecc71;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 600px) {
  .rtb-booking-form {
    padding: 24px 16px;
    border-radius: 10px;
  }
}

/* ================================================
   SHOP PAGE – FILTER LEFT SIDEBAR
   Dựa trên DOM thực tế từ DevTools
   ================================================ */

/* 1. Chuyển main thành CSS Grid 2 cột */
body.woocommerce main.wp-block-group,
body.woocommerce-shop main.wp-block-group {
    display: grid !important;
    grid-template-columns: 270px 1fr !important;
    column-gap: 28px !important;
    align-items: start !important;
}

/* 2. Breadcrumb, tiêu đề, store-notices trải full width */
body.woocommerce main.wp-block-group > .woocommerce.wp-block-breadcrumbs,
body.woocommerce main.wp-block-group > h1.wp-block-query-title,
body.woocommerce main.wp-block-group > .wc-block-store-notices,
body.woocommerce main.wp-block-group > .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* 3. Flex container (count + filter) → CỘT TRÁI (sidebar) */
.wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex {
    grid-column: 1 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    /* Đổi hướng thành dọc */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    /* Giao diện sidebar */
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px 16px !important;
    position: sticky;
    top: 80px;
    align-self: start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100% !important;
}

/* 4. Product count bên trong sidebar */
.wp-block-group.is-layout-flex > .wc-block-product-results-count,
.wp-block-group.is-layout-flex > .wp-block-woocommerce-product-results-count {
    font-size: 13px !important;
    color: #666 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
}

/* 5. WPF Filter bên trong sidebar */
.wp-block-group.is-layout-flex > [id^="wpfMainWrapper"],
.wp-block-group.is-layout-flex > .wpf-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* 6. Products grid → CỘT PHẢI */
body.woocommerce main.wp-block-group > .wp-block-woocommerce-product-collection,
body.woocommerce main.wp-block-group > .wc-block-product-collection,
body.woocommerce main.wp-block-group > .wp-block-query,
body.woocommerce main.wp-block-group > .woocommerce-products-wrapper {
    grid-column: 2 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* 7. Responsive Mobile */
@media (max-width: 782px) {
    body.woocommerce main.wp-block-group,
    body.woocommerce-shop main.wp-block-group {
        grid-template-columns: 1fr !important;
    }
    .wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex {
        grid-column: 1 !important;
        position: static !important;
    }
    body.woocommerce main.wp-block-group > .wp-block-woocommerce-product-collection,
    body.woocommerce main.wp-block-group > .wp-block-query {
        grid-column: 1 !important;
    }
}

/* Fix column bị co hẹp do min-width: 0 */
.single-product .wp-block-columns.alignwide .wp-block-column {
    min-width: 280px !important;
    flex-shrink: 0 !important;
}

/* Fix overflow-wrap đang break text từ style.min.css */
.single-product .wp-block-post-title,
.single-product .wp-block-column * {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Đảm bảo 2 cột đúng tỷ lệ */
.single-product .wp-block-columns.alignwide .wp-block-column:first-child {
    flex-basis: 50% !important;
    max-width: 50% !important;
}

.single-product .wp-block-columns.alignwide .wp-block-column:last-child {
    flex-basis: 45% !important;
    max-width: 45% !important;
}