/* ============================================================
   SINGLE PRODUCT – Custom Template
   flatsome-child/assets/css/single-product.css
   ============================================================ */

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.sp-breadcrumb-bar {
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  font-size: 13px;
}
.sp-breadcrumb-bar .woocommerce-breadcrumb {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #666;
}
.sp-breadcrumb-bar .woocommerce-breadcrumb a {
  color: #444;
  text-decoration: none;
}
.sp-breadcrumb-bar .woocommerce-breadcrumb a:hover {
  color: var(--primary-color, #1a73e8);
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.sp-wrapper {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* ── Product Title ──────────────────────────────────────────────────────── */
.sp-product-title {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 20px;
  padding: 0;
}

/* ── Main Row (gallery | summary) ──────────────────────────────────────── */
.sp-main-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.sp-gallery-col {
  flex: 0 0 56%;
  max-width: 56%;
}

.sp-summary-col {
  flex: 1;
  min-width: 0;
}

/* ── Rating Row ─────────────────────────────────────────────────────────── */
.sp-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sp-rating-row .star-rating {
  font-size: 14px;
}
.sp-review-text {
  font-size: 13px;
  color: #888;
}
.sp-sold-badge {
  font-size: 13px;
  color: #555;
}

/* ── Stock Row ──────────────────────────────────────────────────────────── */
.sp-stock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sp-in-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #1a6d2e;
}
.sp-icon-box {
  width: 16px;
  height: 16px;
  color: #1a6d2e;
  flex-shrink: 0;
}
.sp-stock-sep {
  display: inline-flex;
  align-items: center;
}
.sp-stock-sep svg {
  width: 16px;
  height: 16px;
  color: #e53935;
}
.sp-warehouse-link {
  font-size: 13px;
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}
.sp-warehouse-link:hover {
  text-decoration: underline;
}
.sp-out-stock {
  font-size: 13px;
  font-weight: 600;
  color: #c62828;
}

/* ── Updated Date ───────────────────────────────────────────────────────── */
.sp-updated-date {
  font-size: 12.5px;
  color: #888;
  margin-bottom: 14px;
}
.sp-updated-date span {
  font-weight: 600;
  color: #555;
}

/* ── Price Box ──────────────────────────────────────────────────────────── */
.sp-price-box {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* Original / regular price row */
.sp-price-original-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sp-price-original-label {
  font-size: 13px;
  color: #777;
}
.sp-price-original {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}
.sp-discount-badge {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #ffcc80;
}

/* Current / sale price row */
.sp-price-current-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sp-price-current-label {
  font-size: 13px;
  color: #555;
  font-weight: 500;
  white-space: nowrap;
}
.sp-price-current {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: #d32f2f;
  line-height: 1;
}

/* ── Call Now Button ────────────────────────────────────────────────────── */
.sp-call-btn-wrap {
  margin-bottom: 10px;
}
.sp-btn-call-now {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #43a047;
  color: #fff !important;
  border-radius: 8px;
  padding: 10px 18px;
  text-decoration: none !important;
  transition: background 0.2s;
  min-width: 200px;
}
.sp-btn-call-now:hover {
  background: #2e7d32;
}
.sp-call-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255 255 255 / 0.25);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.sp-call-icon-wrap svg {
  width: 20px;
  height: 20px;
}
.sp-call-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-call-text strong {
  font-size: 15px;
  letter-spacing: 0.5px;
  display: block;
}
.sp-call-text small {
  font-size: 10.5px;
  opacity: 0.9;
  line-height: 1.3;
  display: block;
}

/* ── Phone Discount Line ────────────────────────────────────────────────── */
.sp-phone-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #444;
  margin-bottom: 14px;
}
.sp-icon-phone {
  width: 16px;
  height: 16px;
  color: #e53935;
  flex-shrink: 0;
}
.sp-phone-line a {
  color: #1a73e8;
  font-weight: 700;
  text-decoration: none;
}
.sp-phone-line a:hover {
  text-decoration: underline;
}

/* ── Social Share ───────────────────────────────────────────────────────── */
.sp-social-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sp-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.15s;
}
.sp-social:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.sp-social svg {
  width: 22px;
  height: 22px;
}
.sp-social--fb   { background: #1877f2; }
.sp-social--tiktok { background: #010101; }
.sp-social--yt   { background: #ff0000; }
.sp-social--zalo {
  background: #0068ff;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.3px;
  width: auto;
  padding: 0;
  min-width: 44px;
}

/* ── Add To Cart (MUA NGAY) ─────────────────────────────────────────────── */
.sp-cart-wrap {
  margin-bottom: 12px;
}
.sp-cart-wrap .cart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-cart-wrap .qty {
  width: 80px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 15px;
}
.sp-cart-wrap .single_add_to_cart_button {
  width: 100% !important;
  background: #2e7d32 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  padding: 14px !important;
  cursor: pointer;
  transition: background 0.2s !important;
  text-transform: uppercase;
}
.sp-cart-wrap .single_add_to_cart_button:hover {
  background: #1b5e20 !important;
}

/* ── Installment Buttons ────────────────────────────────────────────────── */
.sp-installment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.sp-btn-installment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: opacity 0.2s;
  color: #fff !important;
  line-height: 1.3;
}
.sp-btn-installment:hover { opacity: 0.88; }
.sp-btn-installment strong {
  font-size: 13px;
  letter-spacing: 0.3px;
}
.sp-btn-installment small {
  font-size: 11px;
  opacity: 0.9;
}
.sp-btn--hdsaison { background: #c62828; }
.sp-btn--card     { background: #1565c0; }

/* ── Gift Box ────────────────────────────────────────────────────────────── */
.sp-gift-box {
  border: 1px dashed #ccc;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.sp-gift-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: 0.5px;
}
.sp-gift-header svg {
  width: 18px;
  height: 18px;
}

/* ── Delivery Box ────────────────────────────────────────────────────────── */
.sp-delivery-box {
  background: #f1f8e9;
  border: 1px solid #c5e1a5;
  border-radius: 8px;
  padding: 14px 16px;
}
.sp-delivery-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sp-delivery-icon {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.sp-delivery-icon svg {
  width: 52px;
  height: 52px;
}
.sp-delivery-time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  color: #2e7d32;
}
.sp-delivery-content strong {
  font-size: 14px;
  color: #1b5e20;
  display: block;
  margin-bottom: 4px;
}
.sp-delivery-content p {
  font-size: 13px;
  color: #555;
  margin: 0;
}
.sp-delivery-value {
  color: #c62828;
  font-weight: 700;
}

#wrapper .woocommerce-tabs {
  max-width: 100%;
}

/* ── Tabs Section ────────────────────────────────────────────────────────── */
.sp-tabs-section {
  margin-top: 36px;
  border-top: 2px solid #eee;
  padding-top: 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sp-gallery-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .sp-main-row {
    flex-direction: column;
    gap: 20px;
  }
  .sp-gallery-col {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .sp-summary-col {
    width: 100%;
  }
  .sp-product-title {
    font-size: 18px;
  }
  .sp-price-current {
    font-size: 26px;
  }
  .sp-btn-call-now {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sp-installment-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SPECS SECTION – Technical Specs Preview + Popup
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────────────────── */
.sp-specs-section {
  margin-top: 36px;
  margin-bottom: 0;
  border-top: 2px solid #333;
  padding-top: 20px;
}

.sp-specs-section-label {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.sp-specs-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 18px;
}

/* ── Preview list (show only first 6 rows) ──────────────────────────────── */
.sp-specs-preview ul.popup {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}

.sp-specs-preview ul.popup li {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  border-bottom: 1px solid #e5e5e5;
}
.sp-specs-preview ul.popup li:last-child {
  border-bottom: none;
}

/* Nth-child trick: show only first 6 rows */
.sp-specs-preview ul.popup li:nth-child(n+7) {
  display: none;
}
/* Alternate row shading */
.sp-specs-preview ul.popup li:nth-child(even) {
  background: #f7f7f7;
}

.sp-specs-preview ul.popup li .title {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #555;
  border-right: 1px solid #e5e5e5;
  font-weight: 500;
}

.sp-specs-preview ul.popup li .value {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.55;
}

/* ── "Xem thêm" button ──────────────────────────────────────────────────── */
.sp-specs-btn-more {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 16px 0 0;
  padding: 13px 20px;
  background: #fff;
  color: #1a1a1a;
  border: 1.5px solid #bbb;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sp-specs-btn-more:hover {
  background: #f0f0f0;
  border-color: #888;
}

/* ── Overlay ────────────────────────────────────────────────────────────── */
.sp-specs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sp-specs-overlay.is-active {
  display: flex;
}

/* ── Popup box ──────────────────────────────────────────────────────────── */
.sp-specs-popup {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}

.sp-specs-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.sp-specs-popup-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.sp-specs-popup-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
  flex-shrink: 0;
  margin: 0 0 0 12px;
}
.sp-specs-popup-close:hover {
  color: #c62828;
}

.sp-specs-popup-body {
  overflow-y: auto;
  padding: 20px 24px 28px;
  flex: 1;
}

.sp-specs-popup-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e5e5;
}

/* ── Popup list (all rows visible) ─────────────────────────────────────── */
.sp-specs-popup-content ul.popup {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}

.sp-specs-popup-content ul.popup li {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: stretch;
  border-bottom: 1px solid #e5e5e5;
}
.sp-specs-popup-content ul.popup li:last-child {
  border-bottom: none;
}
.sp-specs-popup-content ul.popup li:nth-child(even) {
  background: #f7f7f7;
}

.sp-specs-popup-content ul.popup li .title {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #555;
  border-right: 1px solid #e5e5e5;
  font-weight: 500;
}

.sp-specs-popup-content ul.popup li .value {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.55;
}

.sp-gift-box-desc {
  padding: 16px;
}

.sp-gift-box-desc ul {
  margin-left: 20px;
}

.sp-gift-box-desc * {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: #000;
}

/* ── Responsive popup ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sp-specs-popup {
    max-height: 95vh;
  }
  .sp-specs-popup-header {
    padding: 14px 16px;
  }
  .sp-specs-popup-title {
    font-size: 14px;
  }
  .sp-specs-popup-body {
    padding: 14px 16px 20px;
  }
  .sp-specs-preview ul.popup li,
  .sp-specs-popup-content ul.popup li {
    grid-template-columns: 1fr;
  }
  .sp-specs-preview ul.popup li .title,
  .sp-specs-popup-content ul.popup li .title {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 6px;
    background: #f0f0f0;
    font-size: 12px;
  }
  .sp-specs-preview ul.popup li .value,
  .sp-specs-popup-content ul.popup li .value {
    padding-top: 6px;
    font-size: 13px;
  }
  .sp-specs-btn-more {
    max-width: 100%;
  }
}