/* ============================================================
   BeeVision Delta catalog styles (Features 04–05)
   Scoped to .woocommerce so the rest of the site is untouched.
   ============================================================ */

/* ---- 5-column responsive product grid ---- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.woocommerce ul.products li.product img { margin: 0 auto 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  line-height: 1.4;
  min-height: 40px;
}
.woocommerce ul.products li.product .price {
  color: #e60000 !important;
  font-weight: 700;
  font-size: 16px;
}

/* ---- "Thịnh hành" ribbon on Featured products ---- */
.woocommerce ul.products li.product.featured::before {
  content: "Thịnh hành";
  position: absolute;
  top: 8px;
  left: 0;
  background: #ff2d78;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 0 3px 3px 0;
  z-index: 2;
}

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .woocommerce ul.products { grid-template-columns: repeat(1, 1fr); }
}

/* ---- Dropdown filter bar ---- */
.bvs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 6px;
}
.bvs-filter-bar select {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
  background: #fff;
  color: #333;
}
.bvs-filter-submit {
  padding: 8px 16px;
  background: #A2C605;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* ---- Category quick links ---- */
.bvs-quick-links { margin: 0 0 20px; font-size: 14px; }
.bvs-quick-links span { color: #666; }
.bvs-quick-links a {
  display: inline-block;
  margin: 0 8px 6px 0;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #A2C605;
  border-radius: 16px;
  color: #333;
  text-decoration: none;
}
.bvs-quick-links a:hover { background: #A2C605; color: #fff; }

/* ---- Quote / Zalo / Hotline CTAs (Feature 05) ---- */
.bvs-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.woocommerce ul.products li.product .bvs-cta { justify-content: center; margin: 10px 0 0; }
.bvs-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
}
.bvs-cta .btn-quote   { background: #A2C605; color: #fff; }
.bvs-cta .btn-quote:hover { background: #8ba904; }
.bvs-cta .btn-zalo    { background: #0068ff; color: #fff; }
.bvs-cta .btn-hotline { background: #fff; color: #e60000; border: 1px solid #e60000; }
.woocommerce ul.products li.product .bvs-cta a { padding: 7px 12px; font-size: 13px; }

/* ---- Quote modal ---- */
.bvs-quote-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  padding: 20px;
  overflow-y: auto;
}
.bvs-quote-modal.open { display: block; }
.bvs-quote-modal .bvs-quote-inner {
  background: #fff;
  max-width: 560px;
  margin: 40px auto;
  padding: 26px;
  border-radius: 8px;
  position: relative;
}
.bvs-quote-modal .bvs-quote-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  background: none;
  border: 0;
}
.bvs-quote-modal h3 { margin: 0 0 6px; font-size: 20px; }
.bvs-quote-modal .bvs-quote-ctx { color: #666; font-size: 14px; margin: 0 0 14px; }

/* ============================================================
   Delta hub page (/delta/)
   ============================================================ */
.bvs-hub { max-width: 1100px; margin: 0 auto; }
.bvs-hub section { margin: 0 0 42px; }
.bvs-hub h2 { font-size: 24px; margin: 0 0 16px; color: #222; }
.bvs-hub p { font-size: 16px; line-height: 1.8; color: #333; }

.bvs-hub-hero { text-align: center; padding: 8px 0 4px; }
.bvs-hub-sub { font-size: 18px; color: #555; max-width: 760px; margin: 0 auto 22px; line-height: 1.7; }
.bvs-btn {
  display: inline-block; padding: 13px 28px; border-radius: 5px;
  font-weight: 700; font-size: 16px; text-decoration: none; margin: 6px;
}
.bvs-btn-primary { background: #A2C605; color: #fff; }
.bvs-btn-primary:hover { background: #8ba904; color: #fff; }
.bvs-btn-outline { background: #fff; color: #333; border: 1px solid #A2C605; }
.bvs-btn-outline:hover { background: #A2C605; color: #fff; }

.bvs-cert { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; background: #f7fbe9; border: 1px solid #e4efc4; border-radius: 8px; padding: 24px; }
.bvs-cert img { width: 320px; max-width: 100%; height: auto; box-shadow: 0 4px 18px rgba(0,0,0,.12); border-radius: 4px; }
.bvs-cert-txt { flex: 1; min-width: 260px; }
.bvs-cert-txt .bvs-trust { font-weight: 700; color: #2f7d0b; font-size: 17px; margin-top: 10px; }

.bvs-cat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bvs-cat-card { display: block; background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; text-decoration: none; color: #222; transition: box-shadow .15s, transform .15s; }
.bvs-cat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.bvs-cat-card .bvs-cat-head { height: 8px; background: #A2C605; }
.bvs-cat-card .bvs-cat-body { padding: 16px 18px; }
.bvs-cat-card h3 { margin: 0 0 8px; font-size: 17px; color: #1b3a63; }
.bvs-cat-card p { font-size: 14px; line-height: 1.6; color: #555; margin: 0 0 10px; }
.bvs-cat-card .bvs-cat-link { color: #A2C605; font-weight: 700; font-size: 14px; }
.bvs-cat-card.bvs-cat-soon { opacity: .75; }
.bvs-cat-card.bvs-cat-soon .bvs-cat-head { background: #bbb; }

.bvs-faq-item { border-bottom: 1px solid #eee; padding: 14px 0; }
.bvs-faq-item h3 { font-size: 17px; margin: 0 0 6px; color: #1b3a63; }
.bvs-faq-item p { font-size: 15px; line-height: 1.7; color: #444; margin: 0; }

@media (max-width: 900px) { .bvs-cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bvs-cat-cards { grid-template-columns: 1fr; } }