/* ============================================================
   WooCommerce styling cho VinaSite (Cáp Điện TCT) — brand navy + cam
   Áp trên markup chuẩn WooCommerce, bao trong .dragon-scope của theme cha.
   ============================================================ */
:root{
  --tct-navy:#0f2145; --tct-navy2:#14294d; --tct-orange:#ff6a00; --tct-orange-d:#e85f00;
  --tct-ink:#0e1726; --tct-slate:#54607a; --tct-line:#e6ebf3; --tct-soft:#f7f9fc;
}

/* Khung nội dung woo nằm trong container gọn, canh giữa */
.woocommerce, .woocommerce-page{ color:#1a1a1a; }
.woocommerce .dragon-container, .woocommerce-page .dragon-container{ max-width:1200px; }
body.woocommerce main#main, body.woocommerce-page main#main{ padding:26px 16px 50px; }
.woocommerce #primary, .woocommerce-page #primary{ max-width:1200px; margin:0 auto; }

/* Tiêu đề trang shop / danh mục */
.woocommerce-products-header{ margin:6px 0 20px; }
.woocommerce-products-header__title, .woocommerce .entry-title, .woocommerce-page .entry-title{
  font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--tct-navy); line-height:1.2; margin:0 0 6px;
}
.woocommerce-products-header .term-description{ color:var(--tct-slate); }

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb{ font-size:13.5px; color:var(--tct-slate); margin-bottom:16px; }
.woocommerce .woocommerce-breadcrumb a{ color:var(--tct-navy); text-decoration:none; }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--tct-orange); }

/* Thanh kết quả + sắp xếp */
.woocommerce .woocommerce-result-count{ color:var(--tct-slate); font-size:14px; }
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--tct-line); border-radius:9px; padding:8px 12px; color:var(--tct-ink); background:#fff;
}

/* ===== Lưới sản phẩm ===== */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; }
/* Tắt clearfix ::before/::after của WooCommerce — trong grid chúng thành ô trống cột 1 */
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none !important; display:none !important; }
.woocommerce ul.products li.product{ width:auto!important; margin:0!important; float:none!important; clear:none!important; }
.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--tct-line); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(13,26,51,.12); border-color:#d6def0; }
.woocommerce ul.products li.product a img{ border-radius:10px; margin-bottom:12px; background:var(--tct-soft); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px; font-weight:600; color:var(--tct-ink); line-height:1.45; padding:0; min-height:42px;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{ color:var(--tct-orange-d); }
.woocommerce ul.products li.product .price{ color:var(--tct-navy); font-weight:800; font-size:16px; margin:6px 0 10px; }
.woocommerce ul.products li.product .price del{ color:#9aa4b6; font-weight:500; font-size:13px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--tct-orange-d); }
.woocommerce ul.products li.product .button{ margin-top:auto; }

/* Nhãn Sale */
.woocommerce span.onsale{
  background:linear-gradient(135deg,var(--tct-orange),#f99b1c); color:#fff; font-weight:700;
  border-radius:8px; padding:4px 10px; min-height:0; min-width:0; line-height:1.4; top:10px; left:10px; margin:0;
}

/* ===== Nút ===== */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--tct-orange); color:#fff; border-radius:10px; font-weight:700; padding:11px 18px;
  border:0; transition:background .15s, transform .15s; text-transform:none; letter-spacing:0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background:var(--tct-orange-d); color:#fff; transform:translateY(-1px);
}
.woocommerce a.button.tct-outline, .woocommerce .button.outline{
  background:transparent; color:var(--tct-navy); border:1.5px solid var(--tct-navy);
}

/* Phân trang */
.woocommerce nav.woocommerce-pagination ul{ border:0; gap:6px; display:flex; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--tct-line); border-radius:9px; color:var(--tct-ink); padding:8px 14px; background:#fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--tct-navy); color:#fff; border-color:var(--tct-navy); }
.woocommerce nav.woocommerce-pagination ul li a:hover{ background:var(--tct-orange); color:#fff; border-color:var(--tct-orange); }

/* ===== Trang sản phẩm đơn ===== */
.woocommerce div.product .product_title{ font-size:clamp(22px,2.6vw,30px); font-weight:800; color:var(--tct-navy); line-height:1.25; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--tct-orange-d); font-weight:800; font-size:26px; }
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:12px; }
.woocommerce div.product form.cart{ margin-top:16px; }
.woocommerce div.product form.cart div.quantity{ margin-right:10px; }
.woocommerce .quantity input.qty{ border:1px solid var(--tct-line); border-radius:9px; padding:10px; width:70px; }
.woocommerce div.product form.cart .button{ padding:13px 26px; font-size:16px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--tct-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--tct-soft); border:1px solid var(--tct-line); border-radius:10px 10px 0 0; margin:0 4px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:#fff; border-bottom-color:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--tct-navy); font-weight:700; }
.woocommerce div.product .woocommerce-tabs .panel h2{ color:var(--tct-navy); font-size:20px; }
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2{ color:var(--tct-navy); font-size:22px; font-weight:800; }

/* Ảnh gallery bo góc */
.woocommerce div.product div.images img{ border-radius:12px; }

/* ===== Trang sản phẩm đơn: bản chuyên nghiệp ===== */
.woocommerce div.product{ margin-top:6px; }
.woocommerce div.product div.summary{ padding-left:6px; }
.woocommerce div.product .product_title{ margin:0 0 8px; }
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:8px; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color:#333; font-size:15.5px; line-height:1.75; border-top:1px solid var(--tct-line);
  padding-top:14px; margin-top:12px;
}
.woocommerce div.product .woocommerce-product-details__short-description p{ margin:0 0 8px; }

/* Gallery: viền + thumbnail */
.woocommerce div.product div.images.woocommerce-product-gallery{ border:1px solid var(--tct-line); border-radius:14px; padding:10px; background:#fff; }
.woocommerce div.product div.images img{ border-radius:10px; }
.woocommerce div.product .flex-control-thumbs{ margin-top:10px; }
.woocommerce div.product .flex-control-thumbs li{ width:20%; }
.woocommerce div.product .flex-control-thumbs img{ border-radius:8px; border:1px solid var(--tct-line); opacity:.75; transition:opacity .15s, border-color .15s; }
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--tct-orange); }

/* Khối "Liên hệ báo giá" */
.tct-quote-box{ background:linear-gradient(135deg,#fff6ee,#fff0e3); border:1px solid #ffd3ad; border-radius:14px; padding:18px 20px; margin:16px 0; }
.tct-quote-box__price{ font-size:16px; color:var(--tct-navy); margin-bottom:14px; }
.tct-quote-box__price strong{ color:var(--tct-orange-d); font-size:21px; font-weight:800; }
.tct-quote-box__price .amount{ color:var(--tct-orange-d); font-weight:800; font-size:24px; }
.tct-quote-box__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.tct-qbtn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:11px; font-weight:700; font-size:16px; text-decoration:none; transition:transform .15s, background .15s; }
.tct-qbtn:hover{ transform:translateY(-2px); }
.tct-qbtn--call{ background:var(--tct-orange); color:#fff; }
.tct-qbtn--call:hover{ background:var(--tct-orange-d); color:#fff; }
.tct-qbtn--zalo{ background:#0068ff; color:#fff; }
.tct-qbtn--zalo:hover{ background:#0055d4; color:#fff; }
.tct-quote-box__note{ margin-top:12px; font-size:13px; color:var(--tct-slate); }

/* Hàng cam kết / tin cậy */
.tct-trust{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--tct-line); display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.tct-trust li{ position:relative; padding-left:28px; font-size:14px; color:var(--tct-ink); font-weight:600; }
.tct-trust li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:19px; height:19px; background:var(--tct-orange); color:#fff; border-radius:50%; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }

/* Danh mục sản phẩm dưới CTA */
.woocommerce div.product .product_meta{ font-size:13.5px; color:var(--tct-slate); border-top:1px solid var(--tct-line); padding-top:12px; margin-top:16px; }
.woocommerce div.product .product_meta a{ color:var(--tct-navy); }
.woocommerce div.product .product_meta a:hover{ color:var(--tct-orange); }

/* Tab mô tả: ẩn tiêu đề "Mô tả" trùng lặp, giãn chữ dễ đọc */
.woocommerce div.product .woocommerce-Tabs-panel{ padding-top:20px; line-height:1.8; color:#333; font-size:15.5px; }
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child{ display:none; }
.woocommerce div.product .woocommerce-Tabs-panel img{ border-radius:10px; max-width:100%; height:auto; }
.woocommerce div.product .woocommerce-Tabs-panel table{ width:100%; border-collapse:collapse; margin:10px 0; }
.woocommerce div.product .woocommerce-Tabs-panel table th{ background:var(--tct-navy); color:#fff; padding:10px 12px; text-align:left; }
.woocommerce div.product .woocommerce-Tabs-panel table td{ border:1px solid var(--tct-line); padding:9px 12px; }

/* Sản phẩm liên quan */
.woocommerce .related.products{ margin-top:44px; border-top:1px solid var(--tct-line); padding-top:26px; }

/* ===== Giỏ hàng ===== */
.woocommerce table.shop_table{ border:1px solid var(--tct-line); border-radius:12px; border-collapse:separate; overflow:hidden; }
.woocommerce table.shop_table thead th{ background:var(--tct-navy); color:#fff; font-weight:700; }
.woocommerce table.cart td.actions .coupon .input-text{ border:1px solid var(--tct-line); border-radius:9px; padding:10px; }
.woocommerce .cart-collaterals .cart_totals h2, .woocommerce-checkout h3{ color:var(--tct-navy); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ font-size:16px; }

/* ===== Thanh toán ===== */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-checkout input.input-text, .select2-container .select2-selection{
  border:1px solid var(--tct-line)!important; border-radius:9px!important; padding:11px 12px; min-height:44px;
}
.woocommerce #payment, .woocommerce-checkout #order_review{ background:var(--tct-soft); border:1px solid var(--tct-line); border-radius:12px; }
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{ background:#fff; }

/* Thông báo */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info{ border-top-color:var(--tct-orange); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before{ color:var(--tct-orange); }

/* ===== Responsive ===== */
@media (max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:480px){ .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:10px; }
  .woocommerce ul.products li.product{ padding:10px; } }