/* ===== SHARED PRODUCT PAGE STYLES ===== */

/* Breadcrumb */
.pd-breadcrumb { background:#f5f7fa; border-bottom:1px solid #e8ecf0; padding:10px 0; font-size:13px; }
.pd-breadcrumb ol { display:flex; flex-wrap:wrap; gap:4px; align-items:center; list-style:none; }
.pd-breadcrumb li { color:#666; }
.pd-breadcrumb li+li::before { content:"›"; margin-right:4px; color:#aaa; }
.pd-breadcrumb a { color:var(--color-blue); }
.pd-breadcrumb a:hover { text-decoration:underline; }
.pd-breadcrumb li:last-child { color:#333; font-weight:600; }

/* Product detail section */
.pd-wrap { padding:24px 0 10px; }
.pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* Gallery */
.pd-gallery-main {
  position:relative; border-radius:10px; overflow:hidden;
  background:#f8f8f8; aspect-ratio:4/3;
  border:1px solid #eee;
}
.pd-gallery-main img {
  width:100%; height:100%; object-fit:contain;
  display:none; cursor:zoom-in; padding:14px;
  transition: opacity 0.2s;
}
.pd-gallery-main img.active { display:block; }

.pd-gallery-thumbs {
  display:flex; gap:8px; margin-top:10px;
  flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pd-gallery-thumbs::-webkit-scrollbar { height: 4px; }
.pd-gallery-thumbs::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
.pd-gallery-thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.pd-gallery-thumbs img {
  flex-shrink: 0;
  width:72px; height:54px; object-fit:contain;
  border-radius:6px; border:2px solid transparent;
  cursor:pointer; padding:4px; background:#f8f8f8;
  transition:border-color 0.2s;
}
.pd-gallery-thumbs img.active, .pd-gallery-thumbs img:hover { border-color:var(--color-primary); }

/* Product info */
.pd-title { font-size:24px; font-weight:800; color:#111; margin-bottom:8px; line-height:1.3; }
.pd-rating { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; color:#888; }
.pd-stars { color:#f4a600; font-size:15px; letter-spacing:1px; }

.pd-price-box {
  background:linear-gradient(135deg,#fff5f5,#fff);
  border:1px solid #fdd; border-radius:10px;
  padding:14px 16px; margin-bottom:14px;
}
.pd-price { font-size:28px; font-weight:900; color:#e62222; line-height:1.1; }
.pd-price span { font-size:15px; font-weight:600; margin-left:4px; }
.pd-price-old { font-size:14px; color:#aaa; text-decoration:line-through; margin-top:5px; }
.pd-badge {
  display:inline-block; background:#e62222; color:#fff;
  font-size:12px; font-weight:700; padding:2px 8px;
  border-radius:4px; margin-left:8px; vertical-align:middle;
}

.pd-promo-banner {
  background:linear-gradient(135deg,#e62222,#c0392b);
  color:#fff; font-size:13px; font-weight:700;
  padding:10px 14px; border-radius:8px;
  text-align:center; margin-bottom:14px;
  line-height:1.5;
}

.pd-benefits {
  background:#f0f8ff; border:1px solid #cce4ff;
  border-radius:10px; padding:12px 14px;
  margin-bottom:10px; list-style:none;
}
.pd-benefits li {
  font-size:13px; padding:5px 0;
  display:flex; align-items:flex-start; gap:8px;
  border-bottom:1px dashed #d6eeff;
  line-height:1.5;
}
.pd-benefits li:last-child { border-bottom:none; }
.pd-benefits li::before { content:"✔"; color:#1a9b2e; font-weight:700; flex-shrink:0; margin-top:1px; }

.pd-note { font-size:12px; color:#e62222; font-style:italic; margin-bottom:14px; }

/* Action buttons — luôn 3 cột */
.pd-action-row {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:8px; margin-bottom:16px;
}
.pd-btn-action {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:11px 6px;
  border-radius:8px; font-size:12px; font-weight:700;
  cursor:pointer; border:none; text-align:center;
  text-decoration:none; transition:opacity 0.2s, transform 0.15s;
  line-height:1.3; min-height:64px;
}
.pd-btn-action:hover { opacity:0.88; transform:translateY(-1px); }
.pd-btn-action:active { transform:translateY(0); }
.pd-btn-action i { font-size:20px; }
.pd-btn-blue { background:#066fef; color:#fff; }
.pd-btn-cyan { background:#288ad6; color:#fff; }
.pd-btn-zalo { background:#0068ff; color:#fff; }

/* Quote form */
.pd-quote-box {
  background:#fff; border:2px solid var(--color-primary);
  border-radius:10px; padding:16px;
}
.pd-quote-box h4 {
  font-size:14px; font-weight:700; color:#111;
  margin-bottom:12px; text-align:center; text-transform:uppercase;
}
.pd-quote-box .form-group { margin-bottom:10px; }
.pd-quote-box .form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;
}
.pd-quote-box .form-control {
  width:100%; padding:11px 13px; border:1px solid #ddd;
  border-radius:6px; font-size:14px; font-family:inherit;
  outline:none; min-height:44px; -webkit-appearance:none;
}
.pd-quote-box .form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(6,111,239,0.1); }
.pd-btn-submit {
  width:100%; background:#e62222; color:#fff; border:none;
  border-radius:6px; padding:13px; font-size:15px; font-weight:800;
  cursor:pointer; transition:background 0.2s; min-height:50px;
}
.pd-btn-submit:hover { background:#c0392b; }
.form-payment { display:flex; gap:8px; }
.payment-label {
  flex:1; border:1.5px solid #dde; border-radius:8px;
  padding:9px 10px; font-size:13px; font-weight:600; color:#333;
  cursor:pointer; text-align:center; transition:border-color 0.2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.payment-label:has(input:checked) { border-color:var(--color-primary); background:#f0f6ff; }

/* Description */
.pd-desc-wrap { padding:16px 0 28px; }
.pd-desc-grid { display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }

.pd-desc-content h2 {
  font-size:19px; font-weight:800; color:#111;
  margin:20px 0 10px; padding-bottom:8px;
  border-bottom:3px solid var(--color-primary);
  line-height:1.4;
}
.pd-desc-content h3 { font-size:16px; font-weight:700; color:var(--color-primary); margin:16px 0 8px; }
.pd-desc-content p { font-size:14px; line-height:1.8; color:#333; margin-bottom:10px; }
.pd-desc-content ul { list-style:disc; padding-left:20px; margin-bottom:12px; }
.pd-desc-content ul li { font-size:14px; line-height:1.8; color:#333; margin-bottom:4px; }

.pd-specs-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.pd-specs-table tr:nth-child(even) { background:#f7f9fc; }
.pd-specs-table td { padding:9px 12px; border:1px solid #e0e6ef; }
.pd-specs-table td:first-child { font-weight:600; color:#444; width:42%; background:#eef4fb; }

/* Sidebar */
.pd-sidebar {
  background:#fff; border:1px solid #dde;
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  position:sticky; top:78px;
}
.pd-sidebar-head {
  background:linear-gradient(135deg,var(--color-primary),#0558c4);
  color:#fff; padding:18px; text-align:center;
}
.pd-avatar {
  width:70px; height:70px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.5);
  margin:0 auto 10px; object-fit:cover; display:block;
}
.pd-sidebar-head h4 { font-size:16px; font-weight:800; }
.pd-sidebar-head p { font-size:12px; opacity:0.85; margin-top:3px; }
.pd-sidebar-body { padding:16px; }
.pd-sidebar-benefits { margin-bottom:14px; list-style:none; }
.pd-sidebar-benefits li {
  font-size:13px; padding:6px 0; border-bottom:1px dashed #eee;
  display:flex; gap:7px; line-height:1.4;
}
.pd-sidebar-benefits li:last-child { border-bottom:none; }
.pd-sidebar-benefits li i { color:#1a9b2e; width:14px; flex-shrink:0; margin-top:2px; }
.pd-btn-call {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#1a9b2e; color:#fff; padding:13px; border-radius:8px;
  font-weight:800; font-size:16px; margin-bottom:10px;
  transition:background 0.2s; text-decoration:none; min-height:50px;
}
.pd-btn-call:hover { background:#148025; color:#fff; }
.pd-btn-quote {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#e62222; color:#fff; padding:12px; border-radius:8px;
  font-weight:700; font-size:14px; transition:background 0.2s;
  text-decoration:none; min-height:46px;
}
.pd-btn-quote:hover { background:#c0392b; color:#fff; }

/* Service badge */
.pd-service-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:#1a9b2e; color:#fff; font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:20px; margin-bottom:12px;
}

/* Related */
.pd-related { padding:20px 0 40px; background:#f5f7fa; }
.pd-related-title {
  font-size:19px; font-weight:800;
  padding-bottom:10px; border-bottom:3px solid var(--color-primary);
  margin-bottom:20px; display:inline-block;
}
.pd-related-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }

.pd-related-item {
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
  transition:box-shadow 0.2s, transform 0.2s;
}
.pd-related-item:hover { box-shadow:0 6px 20px rgba(0,0,0,0.13); transform:translateY(-3px); }
.pd-related-img { position:relative; aspect-ratio:4/3; background:#f5f5f5; overflow:hidden; }
.pd-related-img img { width:100%; height:100%; object-fit:contain; padding:8px; transition:transform 0.3s; }
.pd-related-item:hover .pd-related-img img { transform:scale(1.05); }
.pd-related-badge {
  position:absolute; top:8px; left:8px;
  background:#e62222; color:#fff; font-size:11px; font-weight:700;
  padding:3px 7px; border-radius:4px;
}
.pd-related-body { padding:10px; }
.pd-related-name { font-size:13px; font-weight:700; color:#111; margin-bottom:5px; line-height:1.3; display:block; }
.pd-related-name:hover { color:var(--color-primary); }
.pd-related-price { font-size:14px; font-weight:800; color:#e62222; }
.pd-related-old { font-size:11px; color:#aaa; text-decoration:line-through; }
.pd-btn-related {
  display:block; text-align:center; background:var(--color-primary);
  color:#fff; font-size:11px; font-weight:700; padding:7px;
  border-radius:5px; margin-top:8px; transition:background 0.2s;
  text-decoration:none;
}
.pd-btn-related:hover { background:#0558c4; color:#fff; }

/* Modal */
.pd-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.6); z-index:9999;
  align-items:center; justify-content:center;
  padding:16px;
}
.pd-modal-overlay.open { display:flex; }
.pd-modal-box {
  background:#fff; border-radius:14px; padding:24px;
  max-width:480px; width:100%; position:relative;
  max-height:92vh; overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.pd-modal-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; font-size:24px;
  cursor:pointer; color:#666; line-height:1;
  width:32px; height:32px; display:flex;
  align-items:center; justify-content:center;
}
.pd-modal-title { font-size:16px; font-weight:800; color:#111; margin-bottom:16px; padding-right:28px; line-height:1.4; }
.pd-modal-form .form-group { margin-bottom:12px; }
.pd-modal-form label { font-size:13px; font-weight:600; color:#444; margin-bottom:5px; display:block; }
.pd-modal-form .form-control {
  width:100%; padding:11px 13px; border:1px solid #ddd;
  border-radius:6px; font-size:16px; /* 16px tránh zoom iOS */
  font-family:inherit; outline:none; min-height:44px; -webkit-appearance:none;
}
.pd-modal-form .form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(6,111,239,0.1); }

/* Calc */
.pd-calc-result { background:#f7f9fc; border-radius:8px; padding:12px 14px; margin-top:14px; }
.pd-calc-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:13px; gap:8px; }
.pd-calc-row span:first-child { color:#555; }
.pd-calc-row span:last-child { font-weight:600; text-align:right; flex-shrink:0; }
.pd-calc-total { border-bottom:none !important; color:#e62222; font-size:14px; padding-top:10px !important; }

/* Lightbox */
.pd-lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92); z-index:10000;
  align-items:center; justify-content:center;
  padding:16px;
}
.pd-lightbox.open { display:flex; }
.pd-lightbox img { max-width:94vw; max-height:88vh; object-fit:contain; border-radius:6px; }
.pd-lightbox-close {
  position:absolute; top:14px; right:18px;
  color:#fff; font-size:32px; cursor:pointer;
  background:none; border:none; line-height:1;
  width:44px; height:44px; display:flex;
  align-items:center; justify-content:center;
}

/* Battery table */
.pd-battery-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; }
.pd-battery-table th { background:var(--color-primary); color:#fff; padding:8px 12px; text-align:left; }
.pd-battery-table td { padding:8px 12px; border:1px solid #dde; }
.pd-battery-table tr:nth-child(even) td { background:#f7f9fc; }

/* ========================================
   RESPONSIVE — TABLET (≤1100px)
======================================== */
@media (max-width:1100px) {
  .pd-related-grid { grid-template-columns:repeat(4,1fr); }
}

/* ========================================
   RESPONSIVE — TABLET NHỎ (≤900px)
======================================== */
@media (max-width:900px) {
  .pd-desc-grid { grid-template-columns:1fr; }
  .pd-sidebar { position:static; margin-top:20px; }
  .pd-related-grid { grid-template-columns:repeat(3,1fr); }
}

/* ========================================
   RESPONSIVE — MOBILE (≤768px)
======================================== */
@media (max-width:768px) {
  .pd-grid { grid-template-columns:1fr; gap:20px; }
  .pd-wrap { padding:16px 0 8px; }

  .pd-title { font-size:21px; }
  .pd-price { font-size:24px; }

  /* Gallery thumbs scrollable */
  .pd-gallery-thumbs { flex-wrap:nowrap; overflow-x:auto; }
  .pd-gallery-thumbs img { width:64px; height:48px; }

  /* Action buttons: vẫn 3 cột nhưng nhỏ hơn */
  .pd-action-row { gap:6px; }
  .pd-btn-action { padding:9px 4px; font-size:11px; min-height:58px; }
  .pd-btn-action i { font-size:17px; }

  /* Sidebar mobile */
  .pd-sidebar { position:static; border-radius:10px; }

  /* Related */
  .pd-related-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
  .pd-related-body { padding:8px; }
  .pd-related-name { font-size:12px; }
  .pd-related-price { font-size:13px; }

  /* Quote form: tên + SĐT cạnh nhau, tỉnh thành + trả góp bên dưới */
  .pd-quote-box { padding:14px 12px; }
  .pd-quote-box .form-row { grid-template-columns:1fr 1fr; gap:8px; }

  /* Quote inline (vf3/vf5/limo style) */
  .quote-inline .form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }

  /* Floating ẩn trên mobile */
  .float-actions { display:none !important; }
}

/* ========================================
   RESPONSIVE — MOBILE NHỎ (≤480px)
======================================== */
@media (max-width:480px) {
  .pd-title { font-size:18px; }
  .pd-price { font-size:22px; }
  .pd-price span { font-size:13px; }
  .pd-price-old { font-size:13px; }

  .pd-promo-banner { font-size:12px; padding:9px 10px; }
  .pd-benefits li { font-size:12px; }

  /* Action buttons: 3 cột nhỏ */
  .pd-action-row { grid-template-columns:1fr 1fr 1fr; gap:5px; }
  .pd-btn-action { padding:8px 3px; font-size:11px; min-height:54px; }
  .pd-btn-action i { font-size:16px; }

  /* Related: 2 cột */
  .pd-related-grid { grid-template-columns:repeat(2,1fr); gap:10px; }

  /* Specs table scroll ngang */
  .pd-specs-table { display:block; overflow-x:auto; }

  /* Modal full width */
  .pd-modal-box { padding:18px 16px; }
  .pd-modal-title { font-size:15px; }

  /* Desc content */
  .pd-desc-content h2 { font-size:16px; }
  .pd-desc-content h3 { font-size:14px; }
  .pd-desc-content p, .pd-desc-content ul li { font-size:13px; }

  /* Sidebar compact */
  .pd-avatar { width:58px; height:58px; }
  .pd-btn-call { font-size:14px; }
}

/* ========================================
   RESPONSIVE — MOBILE RẤT NHỎ (≤360px)
======================================== */
@media (max-width:360px) {
  .pd-title { font-size:16px; }
  .pd-action-row { gap:4px; }
  .pd-btn-action { font-size:10px; min-height:50px; padding:6px 2px; }
  .pd-related-grid { grid-template-columns:1fr 1fr; gap:8px; }
}

/* ========================================
   VIDEO SECTION
======================================== */
.pd-video-wrap { padding:40px 0; background:#f8f9fa; }
.pd-video-title { font-size:22px; font-weight:700; color:#1a1a1a; margin-bottom:24px; text-align:center; }
.pd-video-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pd-video-item { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.pd-video-frame { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.pd-video-frame iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.pd-video-caption { padding:12px 16px; font-size:13px; color:#555; font-weight:500; margin:0; }
@media (max-width:767px) {
  .pd-video-grid { grid-template-columns:1fr; }
  .pd-video-title { font-size:18px; }
}

/* Article images in review section */
.pd-article-img { text-align:center; margin:16px 0; }
.pd-article-img img { max-width:100%; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.1); }