/*
Theme Name: SGTECHPC Theme
Author: Hiếu PC
Version: 1.0 (cleaned)
*/

/* ===== Base ===== */
: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;
}
html,body{margin:0;padding:0;font-family:var(--font-sans);color:var(--text);}

/* ===== Container chi tiết ===== */
.product-frontend.container{
  max-width:1620px;margin:0 auto;padding:0 10px;box-sizing:border-box;
}

/* ===== 3 cột: 500 + 600 + 420; gap 40 ===== */
.product-frontend-3col{
  display:flex;gap:40px;margin-top:30px;align-items:flex-start;
}
.product-col.image{flex:0 0 500px;max-width:500px;}
.product-col.image .pd-image-group{max-width:500px;width:100%;margin-inline:auto;}
.product-col.main-info{flex:0 0 600px;max-width:600px;margin-top:-18px;}
.product-col.sidebar{
  flex:0 0 420px;max-width:420px;display:flex;flex-direction:column;gap:15px;
}

/* Ảnh cột trái */
.product-col.image img{width:100%;border-radius:6px;border:1px solid #ccc;}

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

/* Hành động (alias để không hỏng HTML cũ) */
.product-action,.product-actions{margin-top:14px;}
.product-action button,
.product-actions button{
  padding:10px 20px;border:0;color:#fff;font-weight:700;cursor:pointer;
}
.product-action .add-to-cart{background:#28a745;}
.product-action .buy-now{background:#007bff;}

/* QR – bỏ rule trùng: CHỈ dùng .qr-box img */
.qr-codes{
  display:flex;justify-content:center;gap:60px;margin-top:10px;text-align:center;
}
.qr-label{font-weight:600;color:#d00;margin-bottom:6px;font-size:14px;}
.qr-box img{width:120px;height:120px;border:1px solid #ddd;border-radius:6px;display:block;}

/* Box title – fix gradient hợp lệ */
.box-title{
  background: linear-gradient(90deg, #0b57d0, #0b57d0);
  color:#fff;font-weight:700;padding:8px 15px;border-radius:8px 8px 0 0;
  font-size:16px;margin:-15px -15px 10px;
}

/* ===== Đặc điểm nổi bật ===== */
.product-highlight{
  border:0;background:none;padding:0;margin:0;font-size:16px;line-height:1.6;color:#212a36;
}
.product-col.main-info h3{
  font-size:16px !important;color:#212a36;font-weight:600;margin-bottom:6px;
}
.product-highlight ul{margin:0;padding-left:18px;list-style:disc;}
.product-highlight li{margin-bottom:6px;}

/* ===== Owl gallery (trang chi tiết) ===== */
.pd-image-group{width:100%;}
.pd-image-group .pd-big .item img{
  display:block;width:100%;height:auto;border-radius:8px;border:1px solid #e5e7eb;
}
/* Thumbs */
.pd-thumbs{margin-top:10px;}
.pd-thumbs .thumb{cursor:pointer;border-radius:6px;overflow:hidden;border:1px solid transparent;}
.pd-thumbs .thumb img{display:block;width:100%;height:auto;}
.pd-thumbs .owl-item.current .thumb{border-color:#1e90ff;box-shadow:0 0 0 2px rgba(30,144,255,.2) inset;}
/* Nav */
.pd-big .owl-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);pointer-events:none;}
.pd-big .owl-nav button{position:absolute;pointer-events:auto;background:transparent;border:0;}
.pd-big .owl-nav .owl-prev{left:6px;} .pd-big .owl-nav .owl-next{right:6px;}
.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;
}
.pd-big .owl-nav-btn:hover{background:rgba(0,0,0,.5);}

/* ===== Responsive chính ===== */
@media (max-width:1400px){
  .product-frontend-3col{gap:28px;}
  .product-col.image{flex-basis:460px;max-width:460px;}
  .product-col.main-info{flex-basis:520px;max-width:520px;}
  .product-col.sidebar{flex-basis:360px;max-width:360px;}
}
@media (max-width:992px){
  .product-frontend-3col{flex-direction:column;gap:16px;}
  .product-col.image,.product-col.main-info,.product-col.sidebar{flex:0 0 100%;max-width:100%;}
  .product-col.image .pd-image-group{max-width:680px;}
}

/* ===================== PRODUCT DETAIL EXTRA ===================== */
.product-detail-extra{
  display:grid;grid-template-columns:minmax(0,calc(65% - 12px)) minmax(0,calc(35% - 12px));
  column-gap:24px;row-gap:24px;margin-top:30px;align-items:start;
}
.product-detail-extra>*{min-width:0;}
@media (max-width:991.98px){.product-detail-extra{grid-template-columns:1fr;column-gap:0;}}

/* Nội dung mô tả */
.product-desc-content{line-height:1.6;color:#333;font-size:15px;}

/* =================== cột mô tả-review-thông số =================== */
.product-detail-row{
  width:100%;display:grid;grid-template-columns:minmax(0,64%) minmax(0,36%) !important;gap:24px;align-items:start;margin-top:24px;
}
.product-detail-row .col-left, .product-detail-row .col-right{min-width:0;}
.product-desc-card,.product-spec-card,.rv-card{width:100%;box-sizing:border-box;}
.product-spec-card table{width:100%;table-layout:fixed;border-collapse:collapse;}
.product-spec-card th,.product-spec-card td{word-break:break-word;padding:8px 10px;}
@media (max-width:991.98px){.product-detail-row{grid-template-columns:1fr;}}
@media (min-width:1200px){.product-detail-row{grid-template-columns:minmax(0,70%) minmax(0,30%);}}

/* =================== Reviews / Q&A =================== */
:root{
  --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);
}
.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;
}
.sgtpc-rv__title{font-weight:800;font-size:18px;margin-bottom:10px;color:var(--sgtpc-text)}
.sgtpc-rv__grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:center}
@media (max-width:768px){.sgtpc-rv__grid{grid-template-columns:1fr}}
.sgtpc-rv__scorebox{border:1px solid var(--sgtpc-line);border-radius:12px;padding:18px;text-align:center;background:#fff}
.sgtpc-rv__score{font-size:36px;font-weight:900;line-height:1}
.sgtpc-rv__stars svg{vertical-align:middle;margin:0 1px}
.sgtpc-rv__sub{color:var(--sgtpc-sub);margin-top:6px;font-weight:500}
.sgtpc-rv__dist-row{display:grid;grid-template-columns:88px 1fr 110px;align-items:center;gap:10px;margin:8px 0}
.sgtpc-rv__dist-label{display:flex;align-items:center;gap:4px;color:var(--sgtpc-text);font-weight:700}
.sgtpc-rv__dist-label svg{width:16px;height:16px}
.sgtpc-rv__bar{height:10px;background:var(--sgtpc-line);border-radius:999px;overflow:hidden}
.sgtpc-rv__bar span{display:block;height:100%;background:#d1d5db}
.sgtpc-rv__dist-count{color:var(--sgtpc-sub)}
.sgtpc-centerline{text-align:center;margin:12px 0}
.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}
.sgtpc-btn:active{transform:translateY(1px)}
.sgtpc-btn--primary{background:var(--sgtpc-primary);color:#fff}
.sgtpc-btn--primary:hover{filter:brightness(1.03)}
.sgtpc-btn--danger{background:var(--sgtpc-danger);color:#fff}
.sgtpc-btn--danger:hover{filter:brightness(1.03)}
.sgtpc-btn:disabled{opacity:.6;cursor:not-allowed}
.sgtpc-rv__form{border-top:1px dashed var(--sgtpc-line);margin-top:12px;padding-top:12px}
.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}
.sgtpc-input:focus,.sgtpc-textarea:focus{outline:2px solid color-mix(in srgb, var(--sgtpc-primary) 30%, transparent);border-color:var(--sgtpc-primary)}
.sgtpc-textarea{min-height:110px;resize:vertical;margin:10px 0}
.sgtpc-form-note{margin-top:8px;color:var(--sgtpc-text)}
.sgtpc-attach{display:inline-flex;align-items:center;gap:8px;color:var(--sgtpc-text);cursor:pointer;margin:8px 0 14px}
.sgtpc-attach__icon{font-size:18px}
.sgtpc-rv__rating{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.sgtpc-rv__stars-select button{background:none;border:0;padding:2px;cursor:pointer}
.sgtpc-rv__stars-select button:focus-visible{outline:2px solid var(--sgtpc-primary);border-radius:6px}
.rv-item{border-top:1px solid var(--sgtpc-chip);padding:12px 0}
.rv-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rv-head .rv-stars{display:inline-flex;gap:2px}
.rv-head .rv-date{color:#666;font-size:13px;margin-left:auto}
.rv-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rv-images img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #eee}
/* Q&A */
.sgtpc-qna__box{background:var(--sgtpc-soft);border:1px solid var(--sgtpc-line);border-radius:12px;padding:16px}
.sgtpc-qna__row{display:grid;grid-template-columns:1fr minmax(220px,280px);gap:12px;align-items:start}
.sgtpc-qna__row .sgtpc-textarea,.sgtpc-qna__row textarea{margin:0;min-height:120px;box-sizing:border-box}
.sgtpc-qna__side{display:grid;gap:8px}
.sgtpc-qna__side .sgtpc-input,.sgtpc-qna__side .sgtpc-btn{width:100%}
.sgtpc-qna__send{display:flex;align-items:center;justify-content:center;min-height:44px}
@media (max-width:768px){.sgtpc-qna__row{grid-template-columns:1fr;gap:8px}.sgtpc-qna__side{grid-template-rows:auto auto auto}}
/* Preview ảnh */
.rv-previews{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.rv-thumb{position:relative;width:64px;height:64px;border:1px solid #eee;border-radius:6px;overflow:hidden;background:#fff}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.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
}
.rv-thumb .rv-remove:focus-visible{outline:2px solid #fff}
@media (prefers-reduced-motion:reduce){.sgtpc-btn{transition:none}}
/* Force font vùng Reviews/Q&A (đồng bộ) */
.sgtpc-card,.sgtpc-card *,.sgtpc-qna__box,.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;
}
.sgtpc-btn,.sgtpc-btn--primary,.sgtpc-btn--danger{color:#fff !important;}
.sgtpc-card ::placeholder,.sgtpc-qna__box ::placeholder{color:#9aa3af !important;opacity:1;}

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

/* ===== Mô tả – Collapse ===== */
:root{
  --desc-height-desktop:520px; --desc-height-mobile:380px; --desc-duration:.35s; --desc-fade:84px; --desc-fade-bg:#fff;
}
.desc-collapsible{position:relative;overflow:hidden;transition:max-height var(--desc-duration) ease;}
.desc-collapsible.is-collapsed{max-height:var(--desc-height-desktop);}
@media (max-width:768px){.desc-collapsible.is-collapsed{max-height:var(--desc-height-mobile);}}
.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;
}
.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;
}
.desc-toggle:hover{filter:brightness(.98);}

/* ===== Bảng thông số ===== */
.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;
}
.product-spec-title{font-size:18px;font-weight:700;padding:14px 16px;border-bottom:2px solid var(--brand);background:#f8fafc;}
.product-spec-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.product-spec-table th,.product-spec-table td{
  padding:10px 14px;border-bottom:1px solid #eef2f7;border-right:1px solid #eef2f7;vertical-align:middle;word-wrap:break-word;
}
.product-spec-table th:nth-child(1),.product-spec-table td:nth-child(1){width:20%;}
.product-spec-table th:nth-child(3),.product-spec-table td:nth-child(3){width:20%;}
.product-spec-table th{font-weight:600;color:#1f2937;background:#fafbfc;}
.product-spec-table td{color:#475569;}
.product-spec-table tr:last-child th,.product-spec-table tr:last-child td{border-bottom:0;}
.product-spec-table tr th:last-child,.product-spec-table tr td:last-child{border-right:0;}
.product-spec-table tr:hover th,.product-spec-table tr:hover td{background:#f7f9fc;}
@media (max-width:767.98px){
  .product-spec-table,.product-spec-table tr,.product-spec-table th,.product-spec-table td{display:block;width:100% !important;}
  .product-spec-table th{border-right:0;border-bottom:0;background:#f8fafc;}
  .product-spec-table td{border-right:0;}
}

/* ===== Nút MUA NGAY & hàng nút ===== */
.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;
}
.product-actions .buy-now:hover{background:#cc0010;}
.product-actions .buy-now .sub{display:block;font-size:13px;font-weight:400;text-transform:none;margin-top:4px;}
.product-actions-row{display:flex;gap:10px;}
.product-actions-row button{flex:1;padding:12px;font-size:14px;font-weight:600;border:0;border-radius:6px;cursor:pointer;}
.product-actions-row .add-to-cart{background:#f5f5f5;color:#000;border:1px solid #ccc;}
.product-actions-row .add-to-cart:hover{background:#eee;}
.product-actions-row .installment{background:#0066cc;color:#fff;}
.product-actions-row .installment:hover{background:#004c99;}

/* ===== Popup thêm vào giỏ ===== */
#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;
}
#cart-popup.cart-popup.is-open{display:flex !important;}
#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);
}
#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;
}





/* =================== BẮT ĐẦU RESPONSIVE co dãn trên Mobile =================== */


/* Khung container riêng trang chi tiết, tránh ảnh hưởng trang khác */
.single-product .product-frontend.container{
  max-width:var(--container-max);
  padding-inline:var(--container-pad);
}

/* Layout 3 cột: mobile-first */
.single-product .product-frontend-3col{
  display:grid;
  grid-template-columns:1fr;            /* mobile: 1 cột */
  gap:clamp(16px,3vw,40px);
  margin-top:20px;
}

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

/* >= 1200px: đủ 3 cột (500 / 600 / auto) */
@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: co giãn nhưng không vượt 500 */
.single-product .product-col.image{ max-width:500px; width:100%; }
.single-product .product-col.image .pd-image-group{ width:100%; max-width:500px; margin-inline:auto; }
.single-product .pd-image-group img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }

/* Khối giá & CTA giữa */
.single-product .product-col.main .price{ font-size:clamp(18px,2.2vw,24px); }
.single-product .product-col.main .cta-group{ display:flex; flex-wrap:wrap; gap:10px; }

/* Sidebar: card & list gọn */
.single-product .product-col.sidebar .box-title{ font-size:16px; margin-bottom:8px; }

/* BẢNG THÔNG SỐ: cho PC build (không ảnh hưởng linh kiện 2 cột) */
.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; }
.single-product .product-spec-title{ font-size:18px; font-weight:700; padding:14px 16px; border-bottom:2px solid #0b57d0; background:#f8fafc; }

/* Bảng PC: 3 cột — TÊN (60%) / MÃ (20%) / BH (20%) */
.single-product .product-spec-table--pc{ width:100%; border-collapse:separate; border-spacing:0; }
.single-product .product-spec-table--pc th,
.single-product .product-spec-table--pc td{ padding:10px 14px; border-bottom:1px solid #eef2f7; }
@media (min-width:992px){
  .single-product .product-spec-table--pc .col-name{ width:60%; }
  .single-product .product-spec-table--pc .col-sku{ width:20%; }
  .single-product .product-spec-table--pc .col-wr { width:20%; }
}

/* Bảng LINH KIỆN: 2 cột 50:50 — không bị ảnh hưởng bởi PC */
.single-product .product-spec-table--lk{ width:100%; border-collapse:separate; border-spacing:0; }
.single-product .product-spec-table--lk th,
.single-product .product-spec-table--lk td{ padding:10px 14px; border-bottom:1px solid #eef2f7; }
@media (min-width:992px){
  .single-product .product-spec-table--lk .col-left{ width:50%; }
  .single-product .product-spec-table--lk .col-right{ width:50%; }
}

/* Bảng có chiều ngang lớn: cho phép kéo ngang trên mobile */
.single-product .table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }




/* =================== KẾT THÚC RESPONSIVE co dãn trên Mobile =================== */