/* ==========================================================================
   S SELECT — CSS trang chi tiết sản phẩm (product.html)
   Dùng chung style.css (header/footer/lightbox) + home.css (thẻ sản phẩm).
   ========================================================================== */

.pdp { max-width:1240px;margin:0 auto;padding:26px 32px clamp(40px,6vw,72px); }

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb { display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#7F8C83;margin-bottom:26px; }
.breadcrumb a { color:#617066; }
.breadcrumb a:hover { color:#017A36; }
.breadcrumb .sep { opacity:.5; }
.breadcrumb .current { color:#17211B; }

/* --- Khối chính: ảnh trái, thông tin phải ----------------------------- */
.pdp-main { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start; }

.pdp-gallery { position:sticky;top:96px; }
.pdp-stage { background:#fff;border:1px solid #E1EDE4;border-radius:6px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);overflow:hidden; }
.pdp-stage img { width:100%;height:100%;object-fit:contain;object-position:center; }
.pdp-thumbs { display:flex;gap:12px;margin-top:14px;flex-wrap:wrap; }
.pdp-thumb { width:76px;height:76px;border:1px solid #E1EDE4;border-radius:5px;background:#fff;padding:8px;cursor:pointer;overflow:hidden;transition:border-color .2s, box-shadow .2s; }
.pdp-thumb img { width:100%;height:100%;object-fit:contain; }
.pdp-thumb.is-active { border-color:#019944;box-shadow:0 0 0 1px #019944; }
.pdp-thumb:hover { border-color:#4FBF7C; }
.pdp-note-img { font-size:12.5px;color:#9AA79E;margin-top:14px; }

/* --- Cột thông tin ----------------------------------------------------- */
.pdp-origin { display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#617066;margin-bottom:14px; }
.pdp-origin .flag { font-size:15px; }
.pdp-tag { font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#017A36;font-weight:600;margin-bottom:10px; }
.pdp-tag.prod-tag--gold { color:#B08A2E; }
.pdp-tag.prod-tag--indigo { color:#3B3B8F; }
.pdp-title { font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 14px;color:#17211B;text-wrap:balance; }
.pdp-rating { display:flex;align-items:center;gap:12px;font-size:13.5px;color:#7F8C83;margin-bottom:22px;flex-wrap:wrap; }
.pdp-stars { color:#F2B21C;letter-spacing:2px;font-size:15px; }
.pdp-rating .dot { opacity:.5; }
.pdp-code { color:#9AA79E; }

/* --- Hộp giá ----------------------------------------------------------- */
.pdp-price-box { background:#F1F7F2;border:1px solid #E1EDE4;border-radius:6px;padding:20px 22px;margin-bottom:22px; }
.pdp-price-row { display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; }
.pdp-price { font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4vw,40px);font-weight:600;color:#017A36;line-height:1; }
.pdp-price .unit { font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:400;color:#7F8C83;margin-left:2px; }
.pdp-price-old { font-size:16px;color:#9AA79E;text-decoration:line-through; }
.pdp-price-off { background:#E11D2A;color:#fff;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:3px; }
.pdp-price-label { font-size:12.5px;color:#7F8C83;margin-top:8px;letter-spacing:0.02em; }

/* --- Khuyến mãi / cam kết ---------------------------------------------- */
.pdp-promos { border:1px solid #E1EDE4;border-radius:6px;padding:16px 20px;margin-bottom:24px; }
.pdp-promos-title { display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#17211B;margin-bottom:12px; }
.pdp-promos-title svg { width:18px;height:18px;color:#019944; }
.pdp-promo { display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#4B5850;line-height:1.5;padding:7px 0; }
.pdp-promo:not(:last-child) { border-bottom:1px dashed #E1EDE4; }
.pdp-promo .ic { flex:none;width:22px;height:22px;border-radius:5px;background:#EAF4ED;color:#017A36;display:flex;align-items:center;justify-content:center;font-size:13px; }

/* --- Điểm nổi bật ------------------------------------------------------ */
.pdp-benefits { list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:12px; }
.pdp-benefits li { display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#3A473F;line-height:1.55; }
.pdp-benefits .chk { flex:none;width:22px;height:22px;border-radius:50%;background:#019944;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px; }

/* --- Mua / hành động --------------------------------------------------- */
.pdp-buy { display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:26px; }
.qty { display:inline-flex;align-items:center;border:1px solid #D7E5DA;border-radius:4px;background:#fff;overflow:hidden; }
.qty button { width:42px;height:48px;border:none;background:#fff;color:#17211B;font-size:20px;cursor:pointer;transition:background .18s; }
.qty button:hover { background:#EAF4ED;color:#017A36; }
.qty input { width:48px;height:48px;border:none;text-align:center;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;color:#17211B;-moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none;margin:0; }
.pdp-cta { flex:1;min-width:200px;background:#019944;color:#fff;border:none;border-radius:4px;padding:15px 26px;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:600;letter-spacing:0.02em;cursor:pointer;transition:background .2s;text-align:center; }
.pdp-cta:hover { background:#017A36;color:#fff; }
.pdp-cta--ghost { flex:none;min-width:0;background:#fff;color:#017A36;border:1px solid #019944; }
.pdp-cta--ghost:hover { background:#EAF4ED;color:#017A36; }

/* --- Thông số kỹ thuật ------------------------------------------------- */
.pdp-specs { border-top:1px solid #E1EDE4; }
.pdp-spec-row { display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid #E1EDE4;font-size:14px; }
.pdp-spec-row dt { color:#7F8C83; }
.pdp-spec-row dd { margin:0;color:#17211B; }

/* --- Mô tả chi tiết (tabs) --------------------------------------------- */
.pdp-detail { margin-top:clamp(40px,5vw,64px);background:#fff;border:1px solid #E1EDE4;border-radius:8px;overflow:hidden; }
.pdp-detail-inner { display:grid;grid-template-columns:230px 1fr;align-items:start; }
.pdp-tabs { border-right:1px solid #E1EDE4;padding:18px 0;background:#F7FBF8;position:sticky;top:82px;align-self:start; }
.pdp-tab { display:block;width:100%;text-align:left;background:none;border:none;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;color:#4B5850;padding:14px 26px;cursor:pointer;border-left:3px solid transparent;transition:color .18s, background .18s, border-color .18s; }
.pdp-tab:hover { color:#017A36; }
.pdp-tab.is-active { color:#017A36;font-weight:600;background:#fff;border-left-color:#019944; }
.pdp-panels { padding:clamp(26px,3.4vw,44px); }
/* Tất cả mục hiển thị cùng lúc; bấm menu sẽ cuộn tới. Chừa khoảng trên
   để header dính không che tiêu đề khi cuộn tới. */
.pdp-panel { display:block;scroll-margin-top:96px; }
.pdp-panel + .pdp-panel { margin-top:36px;padding-top:36px;border-top:1px solid #EDF3EE; }
.pdp-panel h2 { font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;margin:0 0 16px;color:#17211B; }
.pdp-panel h3 { font-size:16px;font-weight:600;color:#17211B;margin:24px 0 10px; }
.pdp-panel p { font-size:15px;line-height:1.76;color:#4B5850;margin:0 0 14px; }
.pdp-panel ul { margin:0 0 14px;padding-left:20px; }
.pdp-panel li { font-size:15px;line-height:1.7;color:#4B5850;margin-bottom:8px; }
.pdp-reviewer { display:flex;gap:14px;align-items:flex-start;background:#F1F7F2;border:1px solid #E1EDE4;border-radius:8px;padding:16px 18px;margin-top:26px; }
.pdp-reviewer .ava { flex:none;width:46px;height:46px;border-radius:50%;background:#019944;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600; }
.pdp-reviewer .name { font-weight:600;color:#17211B;font-size:14.5px;margin-bottom:4px; }
.pdp-reviewer .bio { font-size:13px;color:#617066;line-height:1.6; }
.pdp-reviewer .badge { display:inline-flex;align-items:center;gap:5px;color:#017A36;font-size:12.5px;font-weight:600;margin-top:8px; }

/* --- Sản phẩm liên quan (dùng .prod-card của home.css) ----------------- */
.related { max-width:1240px;margin:0 auto;padding:0 32px clamp(48px,6vw,88px); }
.related-head { margin:clamp(36px,5vw,56px) 0 clamp(22px,3vw,32px); }
.related-head .section-title { font-size:clamp(26px,3vw,36px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .pdp-main { grid-template-columns:1fr;gap:28px; }
  .pdp-gallery { position:static;top:auto; }
  .pdp-stage { max-width:460px; }
  .pdp-detail-inner { grid-template-columns:1fr; }
  .pdp-tabs { display:flex;flex-wrap:wrap;gap:4px;border-right:none;border-bottom:1px solid #E1EDE4;padding:12px 14px; }
  .pdp-tab { width:auto;padding:9px 14px;border-left:none;border-radius:20px;font-size:14px; }
  .pdp-tab.is-active { background:#EAF4ED;border-left:none; }
}

@media (max-width: 640px) {
  .pdp, .related { padding-left:20px;padding-right:20px; }
  .pdp-price-box { padding:16px 18px; }
  .pdp-spec-row { grid-template-columns:120px 1fr;gap:10px; }
  /* Xếp dọc để nút không bị bóp mỗi chữ một dòng: chọn số lượng ở trên,
     rồi hai nút full chiều rộng bên dưới cho dễ bấm và gọn gàng. */
  .pdp-buy { flex-direction:column;align-items:stretch;gap:12px; }
  .qty { align-self:center; }
  .pdp-cta, .pdp-cta--ghost { width:100%;min-width:0;flex:none; }
}