/*
  SGTECHPC - product-frontend.css
  Dùng chung cho:
  - product-frontend.php (PC)
  - product-frontend-lk.php (LINH KIỆN)
*/

/* =================== TOKENS (dùng lại từ theme) =================== */
:root{
  --font-sans:'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text:#212a36;
  --muted:#6b7280;
  --line:#e5e7eb;

  --brand:#0b57d0;
  --price:#e10000;

  --container-max:1620px;
  --container-pad:10px;

  /* Mô tả collapse */
  --desc-height-desktop:520px;
  --desc-height-mobile:380px;
  --desc-duration:.35s;
  --desc-fade:84px;
  --desc-fade-bg:#fff;
}

/* =================== BASE ONLY SINGLE PRODUCT =================== */
.single-product{
  font-family:var(--font-sans);
  color:var(--text);
}

/* Container trang chi tiết (không đụng container chung) */
.single-product .product-frontend.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
  box-sizing:border-box;
}

/* =================== BREADCRUMB (đang dùng .global-breadcrumb) =================== */
.single-product .global-breadcrumb{
  position:relative;
  padding:14px 0;
  line-height:16px;
}
.single-product .ul.clearfix{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.single-product .ul.clearfix li{display:flex;align-items:center;}
.single-product .ul.clearfix li + li::before{content:"›";margin:0 8px;color:#999;}
.single-product .ul.clearfix a{color:#007bff;text-decoration:none;font-weight:500;}
.single-product .ul.clearfix a:hover{text-decoration:underline;}
.single-product .ul.clearfix .current{color:var(--muted);font-weight:500;}

/* =================== TITLE =================== */
.single-product h1.product-title{
  color:var(--text);
  font-weight:600;
  font-size:24px;
  line-height:32px;
  margin:10px 0 10px;
  padding:0;
  border:0;
}

/* =================== LAYOUT 3 CỘT (GRID - 1 nguồn sự thật) =================== */
/* mobile-first */
.single-product .product-frontend-3col{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,3vw,40px);
  margin-top:20px;
  align-items:start;
}

/* >= 992px: 2 cột (ảnh + main), sidebar xuống dưới */
@media (min-width:992px){
  .single-product .product-frontend-3col{
    grid-template-columns:500px 1fr;
  }
  .single-product .product-col.sidebar{ grid-column:1 / -1; }
}

/* >= 1200px: đủ 3 cột */
@media (min-width:1200px){
  .single-product .product-frontend-3col{
    grid-template-columns:500px 600px 1fr;
  }
  .single-product .product-col.sidebar{ grid-column:auto; }
}

/* Cột ảnh */
.single-product .product-col.image{ width:100%; max-width:500px; }
.single-product .product-col.image .pd-image-group{ width:100%; max-width:500px; margin-inline:auto; }

/* Cột giữa (main-info) */
.single-product .product-col.main-info{ width:100%; }

/* Sidebar */
.single-product .product-col.sidebar{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* =================== OWL GALLERY =================== */
.single-product .pd-image-group{ width:100%; }
.single-product .pd-image-group .pd-big .item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid var(--line);
}

/* thumbs */
.single-product .pd-thumbs{ margin-top:10px; }
.single-product .pd-thumbs .thumb{
  cursor:pointer;
  border-radius:6px;
  overflow:hidden;
  border:1px solid transparent;
}
.single-product .pd-thumbs .thumb img{ display:block;width:100%;height:auto; }
.single-product .pd-thumbs .owl-item.current .thumb{
  border-color:#1e90ff;
  box-shadow:0 0 0 2px rgba(30,144,255,.2) inset;
}

/* nav */
.single-product .pd-big .owl-nav{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  pointer-events:none;
}
.single-product .pd-big .owl-nav button{
  position:absolute;
  pointer-events:auto;
  background:transparent;
  border:0;
}
.single-product .pd-big .owl-nav .owl-prev{ left:6px; }
.single-product .pd-big .owl-nav .owl-next{ right:6px; }
.single-product .pd-big .owl-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  line-height:36px;
  font-size:24px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
}
.single-product .pd-big .owl-nav-btn:hover{ background:rgba(0,0,0,.5); }

/* =================== ĐẶC ĐIỂM NỔI BẬT =================== */
.single-product .product-col.main-info h3{
  font-size:16px !important;
  color:var(--text);
  font-weight:600;
  margin:0 0 6px;
}
.single-product .product-highlight{
  border:0;background:none;padding:0;margin:0;
  font-size:16px;line-height:1.6;color:var(--text);
}
.single-product .product-highlight ul{ margin:0; padding-left:18px; list-style:disc; }
.single-product .product-highlight li{ margin-bottom:6px; }

/* =================== GIÁ =================== */
.single-product .product-price-box{
  background:#f8fafc;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:12px 18px;
  width:91%;
}
.single-product .product-price-box .price-sale{
  color:var(--price);
  font-size:28px;
  font-weight:700;
  margin-right:10px;
  display:inline-block;
}
.single-product .product-price-box .price-old{
  text-decoration:line-through;
  color:#999;
  font-size:18px;
  margin-right:10px;
}
.single-product .product-price-box .price-save{
  color:#64748b;
  font-size:14px;
  font-weight:600;
  display:inline-block;
  margin-top:6px;
}
.single-product .product-price-box .price-contact{
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

/* =================== STOCK BADGE (từ style.css - scope lại) =================== */
.single-product .stock-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  font-weight:500;
  font-size:16px;
  line-height:1;
}
.single-product .badge-in{
  color:#16a34a;
  display:flex;
  align-items:center;
  gap:4px;
}
.single-product .badge-in::before{
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2316a34a' d='M6.173 12.414L2.05 8.293l1.414-1.414 2.709 2.708 6.364-6.364 1.414 1.414z'/%3E%3C/svg%3E");
}

/* dòng tình trạng + bảo hành (LK dùng class này) */
.single-product .stock-warranty-line{
  margin:12px 0 0;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.single-product .stock-warranty-line .warranty-label{
  font-weight:600;
  color:var(--text);
}

/* fallback legacy <p><strong>Tình trạng...</strong> */
.single-product .product-col.main-info > p{
  margin:12px 0 0;
  font-size:16px;
  font-weight:600;
}

/* =================== BOXES (promo/policy/contact) =================== */
.single-product .product-policy,
.single-product .product-contact,
.single-product .product-promo{
  background:#fff;
  padding:15px;
  border:1px solid #007bff;
  border-radius:8px;
  font-size:16px;
}
.single-product .product-policy ul,
.single-product .product-promo ul{
  list-style:disc;
  padding-left:20px;
  margin:0;
}

/* Box title */
.single-product .box-title{
  background:linear-gradient(90deg, var(--brand), var(--brand));
  color:#fff;
  font-weight:700;
  padding:8px 15px;
  border-radius:8px 8px 0 0;
  font-size:16px;
  margin:-15px -15px 10px;
}

/* =================== QR =================== */
.single-product .qr-codes{
  display:flex;
  justify-content:center;
  gap:60px;
  margin-top:10px;
  text-align:center;
}
.single-product .qr-label{
  font-weight:600;
  color:#d00;
  margin-bottom:6px;
  font-size:14px;
}
.single-product .qr-box img{
  width:120px;
  height:120px;
  border:1px solid #ddd;
  border-radius:6px;
  display:block;
}

/* =================== ACTION BUTTONS =================== */
.single-product .product-actions{ margin-top:14px; }

/* MUA NGAY */
.single-product .product-actions .buy-now{
  display:block;
  width:100%;
  background:#e60012;
  color:#fff;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  text-align:center;
  padding:14px 20px;
  border:0;
  border-radius:8px;
  margin:10px 0 12px;
  cursor:pointer;
  transition:background .25s;
}
.single-product .product-actions .buy-now:hover{ background:#cc0010; }
.single-product .product-actions .buy-now .sub{
  display:block;
  font-size:13px;
  font-weight:400;
  text-transform:none;
  margin-top:4px;
}

/* 2 nút dưới */
.single-product .product-actions-row{ display:flex; gap:10px; }
.single-product .product-actions-row button{
  flex:1;
  padding:12px;
  font-size:14px;
  font-weight:600;
  border:0;
  border-radius:6px;
  cursor:pointer;
}
.single-product .product-actions-row .add-to-cart{
  background:#f5f5f5;
  color:#000;
  border:1px solid #ccc;
}
.single-product .product-actions-row .add-to-cart:hover{ background:#eee; }
.single-product .product-actions-row .installment{
  background:#0066cc;
  color:#fff;
}
.single-product .product-actions-row .installment:hover{ background:#004c99; }

/* =================== DETAIL ROW: mô tả + specs =================== */
.single-product .product-detail-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,64%) minmax(0,36%);
  gap:24px;
  align-items:start;
  margin-top:24px;
}
.single-product .product-detail-row .col-left,
.single-product .product-detail-row .col-right{ min-width:0; }

@media (max-width:991.98px){
  .single-product .product-detail-row{ grid-template-columns:1fr; }
}
@media (min-width:1200px){
  .single-product .product-detail-row{ grid-template-columns:minmax(0,70%) minmax(0,30%); }
}

/* desc card */
.single-product .product-desc-card{ width:100%; box-sizing:border-box; }
.single-product .product-desc-content{
  line-height:1.6;
  color:#333;
  font-size:15px;
}

/* Collapse */
.single-product .desc-collapsible{
  position:relative;
  overflow:hidden;
  transition:max-height var(--desc-duration) ease;
}
.single-product .desc-collapsible.is-collapsed{ max-height:var(--desc-height-desktop); }
@media (max-width:768px){
  .single-product .desc-collapsible.is-collapsed{ max-height:var(--desc-height-mobile); }
}
.single-product .desc-collapsible.is-collapsed::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--desc-fade);
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--desc-fade-bg));
  pointer-events:none;
}
.single-product .desc-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #cfe1ff;
  background:#f5f9ff;
  color:#0a4c8a;
  font-weight:700;
  cursor:pointer;
}
.single-product .desc-toggle:hover{ filter:brightness(.98); }

/* =================== SPEC CARD + TABLE =================== */
.single-product .product-spec-card{
  background:#fff;
  border:1px solid #e6eaf0;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  overflow:hidden;
  margin-top:20px;
  width:100%;
  box-sizing:border-box;
}
.single-product .product-spec-title{
  font-size:18px;
  font-weight:700;
  padding:14px 16px;
  border-bottom:2px solid var(--brand);
  background:#f8fafc;
}
.single-product .product-spec-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.single-product .product-spec-table th,
.single-product .product-spec-table td{
  padding:10px 14px;
  border-bottom:1px solid #eef2f7;
  border-right:1px solid #eef2f7;
  vertical-align:middle;
  word-wrap:break-word;
}
.single-product .product-spec-table th:nth-child(1),
.single-product .product-spec-table td:nth-child(1){ width:20%; }
.single-product .product-spec-table th:nth-child(3),
.single-product .product-spec-table td:nth-child(3){ width:20%; }
.single-product .product-spec-table th{
  font-weight:600;
  color:#1f2937;
  background:#fafbfc;
}
.single-product .product-spec-table td{ color:#475569; }
.single-product .product-spec-table tr:last-child th,
.single-product .product-spec-table tr:last-child td{ border-bottom:0; }
.single-product .product-spec-table tr th:last-child,
.single-product .product-spec-table tr td:last-child{ border-right:0; }
.single-product .product-spec-table tr:hover th,
.single-product .product-spec-table tr:hover td{ background:#f7f9fc; }

@media (max-width:767.98px){
  .single-product .product-spec-table,
  .single-product .product-spec-table tr,
  .single-product .product-spec-table th,
  .single-product .product-spec-table td{
    display:block;
    width:100% !important;
  }
  .single-product .product-spec-table th{
    border-right:0;
    border-bottom:0;
    background:#f8fafc;
  }
  .single-product .product-spec-table td{ border-right:0; }
}

/* =================== META STARS (pd-meta-line) =================== */
.single-product .pd-meta-line .stars{
  position:relative;
  display:inline-block;
  line-height:1;
}
.single-product .pd-meta-line .stars-fill{
  position:absolute;
  left:0; top:0;
  white-space:nowrap;
  overflow:hidden;
  color:#f5a623;
}
.single-product .pd-meta-line .stars-bg{ color:#d6d6d6; }

/* =================== REVIEWS / Q&A (giữ nguyên nhưng scope lại) =================== */
.single-product{
  --sgtpc-primary:#1976d2;
  --sgtpc-danger:#e11d48;
  --sgtpc-text:#374151;
  --sgtpc-sub:#6b7280;
  --sgtpc-line:#e5e7eb;
  --sgtpc-bg:#fff;
  --sgtpc-soft:#f9fafb;
  --sgtpc-star:#f59e0b;
  --sgtpc-chip:#f1f3f5;
  --sgtpc-shadow:0 2px 6px rgba(0,0,0,.04);
}
.single-product .sgtpc-card{
  background:var(--sgtpc-bg);
  border:1px solid var(--sgtpc-line);
  border-radius:12px;
  box-shadow:var(--sgtpc-shadow);
  padding:16px 18px;
  margin:14px 0;
}
.single-product .sgtpc-rv__title{font-weight:800;font-size:18px;margin-bottom:10px;color:var(--sgtpc-text)}
.single-product .sgtpc-rv__grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:center}
@media (max-width:768px){.single-product .sgtpc-rv__grid{grid-template-columns:1fr}}
.single-product .sgtpc-rv__scorebox{border:1px solid var(--sgtpc-line);border-radius:12px;padding:18px;text-align:center;background:#fff}
.single-product .sgtpc-rv__score{font-size:36px;font-weight:900;line-height:1}
.single-product .sgtpc-rv__stars svg{vertical-align:middle;margin:0 1px}
.single-product .sgtpc-rv__sub{color:var(--sgtpc-sub);margin-top:6px;font-weight:500}
.single-product .sgtpc-rv__dist-row{display:grid;grid-template-columns:88px 1fr 110px;align-items:center;gap:10px;margin:8px 0}
.single-product .sgtpc-rv__dist-label{display:flex;align-items:center;gap:4px;color:var(--sgtpc-text);font-weight:700}
.single-product .sgtpc-rv__dist-label svg{width:16px;height:16px}
.single-product .sgtpc-rv__bar{height:10px;background:var(--sgtpc-line);border-radius:999px;overflow:hidden}
.single-product .sgtpc-rv__bar span{display:block;height:100%;background:#d1d5db}
.single-product .sgtpc-rv__dist-count{color:var(--sgtpc-sub)}
.single-product .sgtpc-centerline{text-align:center;margin:12px 0}
.single-product .sgtpc-btn{border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer;line-height:1;transition:transform .06s ease, filter .06s ease, opacity .2s ease;white-space:nowrap}
.single-product .sgtpc-btn:active{transform:translateY(1px)}
.single-product .sgtpc-btn--primary{background:var(--sgtpc-primary);color:#fff}
.single-product .sgtpc-btn--primary:hover{filter:brightness(1.03)}
.single-product .sgtpc-btn--danger{background:var(--sgtpc-danger);color:#fff}
.single-product .sgtpc-btn--danger:hover{filter:brightness(1.03)}
.single-product .sgtpc-btn:disabled{opacity:.6;cursor:not-allowed}
.single-product .sgtpc-rv__form{border-top:1px dashed var(--sgtpc-line);margin-top:12px;padding-top:12px}
.single-product .sgtpc-input{width:100%;padding:12px 14px;border:1px solid var(--sgtpc-line);border-radius:10px;background:#fff;color:var(--sgtpc-text);box-sizing:border-box}
.single-product .sgtpc-input:focus,
.single-product .sgtpc-textarea:focus{outline:2px solid color-mix(in srgb, var(--sgtpc-primary) 30%, transparent);border-color:var(--sgtpc-primary)}
.single-product .sgtpc-textarea{min-height:110px;resize:vertical;margin:10px 0}
.single-product .sgtpc-form-note{margin-top:8px;color:var(--sgtpc-text)}
.single-product .sgtpc-attach{display:inline-flex;align-items:center;gap:8px;color:var(--sgtpc-text);cursor:pointer;margin:8px 0 14px}
.single-product .sgtpc-attach__icon{font-size:18px}
.single-product .sgtpc-rv__rating{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.single-product .sgtpc-rv__stars-select button{background:none;border:0;padding:2px;cursor:pointer}
.single-product .sgtpc-rv__stars-select button:focus-visible{outline:2px solid var(--sgtpc-primary);border-radius:6px}
.single-product .rv-item{border-top:1px solid var(--sgtpc-chip);padding:12px 0}
.single-product .rv-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.single-product .rv-head .rv-stars{display:inline-flex;gap:2px}
.single-product .rv-head .rv-date{color:#666;font-size:13px;margin-left:auto}
.single-product .rv-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.single-product .rv-images img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #eee}

/* Q&A */
.single-product .sgtpc-qna__box{background:var(--sgtpc-soft);border:1px solid var(--sgtpc-line);border-radius:12px;padding:16px}
.single-product .sgtpc-qna__row{display:grid;grid-template-columns:1fr minmax(220px,280px);gap:12px;align-items:start}
.single-product .sgtpc-qna__row .sgtpc-textarea,
.single-product .sgtpc-qna__row textarea{margin:0;min-height:120px;box-sizing:border-box}
.single-product .sgtpc-qna__side{display:grid;gap:8px}
.single-product .sgtpc-qna__side .sgtpc-input,
.single-product .sgtpc-qna__side .sgtpc-btn{width:100%}
.single-product .sgtpc-qna__send{display:flex;align-items:center;justify-content:center;min-height:44px}
@media (max-width:768px){
  .single-product .sgtpc-qna__row{grid-template-columns:1fr;gap:8px}
  .single-product .sgtpc-qna__side{grid-template-rows:auto auto auto}
}

/* Preview ảnh */
.single-product .rv-previews{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.single-product .rv-thumb{position:relative;width:64px;height:64px;border:1px solid #eee;border-radius:6px;overflow:hidden;background:#fff}
.single-product .rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.single-product .rv-thumb .rv-remove{
  position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border:0;border-radius:999px;width:20px;height:20px;line-height:20px;font-size:12px;cursor:pointer
}
.single-product .rv-thumb .rv-remove:focus-visible{outline:2px solid #fff}
@media (prefers-reduced-motion:reduce){
  .single-product .sgtpc-btn{transition:none}
}

/* Force font vùng Reviews/Q&A */
.single-product .sgtpc-card,
.single-product .sgtpc-card *,
.single-product .sgtpc-qna__box,
.single-product .sgtpc-qna__box *{
  font-family:'Roboto','SF Pro Display',system-ui,-apple-system,'Segoe UI',Arial,sans-serif !important;
  color:var(--sgtpc-text,#374151) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.single-product .sgtpc-btn,
.single-product .sgtpc-btn--primary,
.single-product .sgtpc-btn--danger{ color:#fff !important; }
.single-product .sgtpc-card ::placeholder,
.single-product .sgtpc-qna__box ::placeholder{ color:#9aa3af !important; opacity:1; }

/* =================== POPUP THÊM VÀO GIỎ (overlay) =================== */
.single-product #cart-popup.cart-popup{
  display:none !important;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99999;
  justify-content:center;
  align-items:center;
}
.single-product #cart-popup.cart-popup.is-open{ display:flex !important; }
.single-product #cart-popup .cart-popup-content{
  background:#fff;
  color:#111;
  padding:28px 36px;
  border-radius:12px;
  text-align:center;
  font-size:18px;
  font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.single-product #cart-popup .icon{
  width:64px;
  height:64px;
  margin:0 auto 10px;
  border-radius:50%;
  border:3px solid #1e88e5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:#1e88e5;
}


/* KHUNG TRANG CHI TIẾT – GIỐNG HOÀNG HÀ PC */
.product-frontend{
  background:#fff;
  border-radius:12px;
  padding:20px;
  margin-top:16px;
  margin-bottom:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}