/* ==========================================================================
   Plus CQ Batteries — custom homepage styling
   Palette derived from brand logo (blue -> green energy swirl)
   ========================================================================== */

*{ box-sizing:border-box; }

:root{
  --pcq-blue: #1F7AB2;
  --pcq-blue-dark: #16325C;
  --pcq-green: #4CAF50;
  --pcq-green-light: #8BC34A;
  --pcq-bg: #F6F8FA;
  --pcq-bg-alt: #EEF3F1;
  --pcq-border: #E3E8EA;
  --pcq-text: #4B5563;
  --pcq-radius: 14px;
  --pcq-radius-pill: 999px;
  --pcq-shadow: 0 10px 30px rgba(22,50,92,0.08);
}

/* Be Vietnam Pro composes Vietnamese diacritics correctly at bold weights
   (Poppins broke marks like the dấu nặng+dấu mũ in "DIỆN"). */
body{ font-family:'Be Vietnam Pro',sans-serif; color:var(--pcq-text); background:#fff; }
h1,h2,h3,h4,.pcq-heading{ font-family:'Be Vietnam Pro',sans-serif; color:var(--pcq-blue-dark); font-weight:700; }
.pcq-container{ max-width:1320px; margin:0 auto; padding:0 20px; }

a{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* ---------- Buttons ---------- */
.pcq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border-radius:var(--pcq-radius-pill); font-weight:600;
  font-size:15px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(90deg,var(--pcq-blue),var(--pcq-green));
  transition:transform .25s ease, box-shadow .25s ease;
}
.pcq-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(31,122,178,0.35); color:#fff; }
.pcq-btn-outline{
  background:transparent; color:var(--pcq-blue-dark); border:2px solid var(--pcq-blue);
  padding:12px 30px;
}
.pcq-btn-outline:hover{ background:var(--pcq-blue); color:#fff; }

/* ---------- Topbar ---------- */
.pcq-topbar{
  background:var(--pcq-blue-dark); color:#dce8f3; font-size:13px; padding:8px 0;
}
.pcq-topbar .pcq-container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.pcq-topbar a{ color:#dce8f3; }
.pcq-topbar-left, .pcq-topbar-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pcq-topbar-left span, .pcq-topbar-left a{ display:inline-flex; align-items:center; gap:6px; }
.pcq-topbar-promo{ color:var(--pcq-green-light); font-weight:500; }

/* ---------- Header ---------- */
.pcq-header{
  background:#fff; border-bottom:1px solid var(--pcq-border);
  position:sticky; top:0; z-index:999; transition:box-shadow .3s ease;
}
.pcq-header.is-stuck{ box-shadow:0 6px 20px rgba(22,50,92,0.10); }
/* 3-column grid (logo | nav | icons) instead of flex space-between, so the
   nav is dead-centered on the bar regardless of how wide the logo vs the
   icon cluster are — space-between only balanced the *gaps*, not the nav's
   actual center position, which is why it hugged the logo before. */
.pcq-header-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:14px 0;
}
.pcq-logo img{ max-height:56px; width:auto; }
.pcq-logo{ font-size:22px; font-weight:800; color:var(--pcq-blue-dark); }

.pcq-nav{ display:flex; justify-content:center; }
.pcq-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.pcq-nav a{ color:var(--pcq-blue-dark); font-weight:500; font-size:15px; padding:6px 0; position:relative; }
.pcq-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--pcq-green); transition:width .25s ease;
}
.pcq-nav a:hover::after{ width:100%; }

.pcq-header-icons{ display:flex; align-items:center; gap:18px; justify-self:end; }
.pcq-header-icons a{ color:var(--pcq-blue-dark); position:relative; display:inline-flex; }
.pcq-header-icons svg{ width:22px; height:22px; }
.pcq-count-badge{
  position:absolute; top:-8px; right:-10px; background:var(--pcq-green);
  color:#fff; font-size:11px; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.pcq-mobile-toggle{ display:none; background:none; border:none; color:var(--pcq-blue-dark); }

/* ---------- Hero image slider (jmbatteries.com-style banner carousel) ---------- */
/* Each slide is a full pre-designed banner image (copy/CTA baked in by the
   uploader via Customizer), so this is a pure crossfade carousel — no text
   overlay logic needed. The aspect-ratio is fixed at the source images'
   own ratio (2000:700) at EVERY breakpoint — never overridden narrower —
   because these banners carry edge-to-edge text (jmbatteries-style: "ONE-
   STOP Solar Battery System Solution" etc). A first attempt used a taller
   ratio on mobile (down to 1:1) so the banner wouldn't look like a thin
   sliver, but object-fit:cover then has to zoom in to cover the taller
   box, which crops the LEFT/RIGHT edges — exactly where the baked-in text
   sits — cutting words off. Keeping the container ratio >= the image's own
   ratio guarantees cover only ever trims top/bottom (plain sky/water in
   these banners), never the sides, at any viewport width.
   !important on the nav controls: Astra's own base stylesheet applies
   generic sizing/display rules to bare <button> elements (already proven
   to fight our markup once before, see the mobile-drawer note below), so
   position/display/size here are pinned to guarantee the arrows/dots
   always render as an absolutely-positioned overlay, never as stacked
   block-level buttons under the image. */
.pcq-hero-slider{
  position:relative; overflow:hidden; width:100%; background:#0F2A4A;
  aspect-ratio:2000/700;
}
.pcq-hero-slides{ position:relative; width:100%; height:100%; }
.pcq-hero-slide{
  position:absolute !important; inset:0; opacity:0; pointer-events:none;
  transition:opacity .8s ease; margin:0; width:100%; height:100%;
}
.pcq-hero-slide.is-active{ opacity:1; pointer-events:auto; z-index:2; }
.pcq-hero-slide > a,
.pcq-hero-slide > img{ display:block; width:100%; height:100%; }
.pcq-hero-slide img{ object-fit:cover; object-position:center; }

.pcq-hero-arrow{
  position:absolute !important; top:50% !important; transform:translateY(-50%); z-index:5;
  width:44px !important; height:44px !important; border-radius:50% !important; border:none; cursor:pointer;
  background:rgba(255,255,255,0.85); color:var(--pcq-blue-dark); margin:0; padding:0;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.15); transition:background .2s ease, transform .2s ease;
}
.pcq-hero-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.pcq-hero-arrow-prev{ left:16px !important; right:auto !important; }
.pcq-hero-arrow-next{ right:16px !important; left:auto !important; }

.pcq-hero-dots{
  position:absolute !important; bottom:18px !important; left:50% !important; top:auto !important;
  transform:translateX(-50%); z-index:5;
  display:flex !important; align-items:center; gap:4px; width:auto !important;
}
.pcq-hero-dot{
  width:22px !important; height:22px !important; padding:0; margin:0; border:none; background:transparent; cursor:pointer;
  display:flex !important; align-items:center; justify-content:center;
}
.pcq-hero-dot::after{
  content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.55);
  transition:background .25s ease, transform .25s ease;
}
.pcq-hero-dot.is-active::after{ background:#fff; transform:scale(1.3); }

/* ---------- Hero (fallback, shown only until slide images are uploaded) ---------- */
/* Dark navy -> blue gradient so the white headline/eyebrow text actually
   has contrast (a pale near-white gradient here made the copy unreadable). */
.pcq-hero{
  position:relative; overflow:hidden; min-height:480px; display:flex; align-items:center;
  background:linear-gradient(120deg, #0F2A4A 0%, #1F7AB2 100%);
}
/* The illustration used to be position:absolute against the full-bleed
   .pcq-hero, anchored to the real viewport edge — on wide screens that put
   it far outside the 1320px content column, disconnected from the text
   block. Making .pcq-hero-inner a flex row bounded by .pcq-container keeps
   both the copy and the illustration inside the same, consistently
   centered content width at every viewport size. */
.pcq-hero-inner{
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  position:relative; z-index:2; width:100%;
}
/* flex-shrink:0 here used to force the text block to keep its intended
   600px width even inside a narrow mobile viewport, pushing it (and the
   button) past the screen edge instead of wrapping — that was the mobile
   overflow bug. min-width:0 overrides flexbox's default "min-width:auto"
   (which also blocks shrinking below content size) so long headings can
   wrap normally instead of forcing the box wider than the viewport. */
.pcq-hero-content{ max-width:600px; width:100%; padding:60px 0; color:#fff; min-width:0; }
.pcq-hero-content .pcq-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pcq-green-light); font-weight:600; margin-bottom:14px;
}
.pcq-hero-content h1{
  color:#fff; font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; margin:0 0 16px; font-weight:800;
  overflow-wrap:break-word;
}
.pcq-hero-content p{ color:#dce8f3; font-size:18px; margin-bottom:28px; }
.pcq-hero-illustration{
  width:280px; max-width:32%; height:auto; opacity:.95; flex-shrink:0; pointer-events:none;
}

/* ---------- Section heading ---------- */
.pcq-section{ padding:70px 0; }
.pcq-section-alt{ background:var(--pcq-bg-alt); }
.pcq-section-head{ text-align:center; margin-bottom:44px; }
.pcq-section-head .pcq-eyebrow{
  color:var(--pcq-green); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:13px;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
}
.pcq-section-head .pcq-eyebrow::before,.pcq-section-head .pcq-eyebrow::after{ content:""; width:24px; height:1px; background:var(--pcq-green); }
.pcq-section-head h2{ font-size:32px; margin:0 0 10px; }
.pcq-section-head p{ color:var(--pcq-text); max-width:560px; margin:0 auto; }

/* ---------- Product grid (WooCommerce shortcode wrapper) ---------- */
.pcq-products ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:26px; list-style:none; margin:0; padding:0; }
.pcq-products ul.products li.product{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:18px; text-align:center; transition:transform .25s ease, box-shadow .25s ease; position:relative;
}
.pcq-products ul.products li.product:hover{ transform:translateY(-6px); box-shadow:var(--pcq-shadow); border-color:transparent; }
.pcq-products ul.products li.product img{ border-radius:10px; margin-bottom:14px; }
.pcq-products ul.products li.product .woocommerce-loop-product__title{ font-size:15px; color:var(--pcq-blue-dark); font-weight:600; }
.pcq-products ul.products li.product .price{ color:var(--pcq-green); font-weight:700; }
.pcq-products ul.products li.product .price del{ color:#a7b0b8; font-weight:400; margin-right:6px; }
.pcq-products ul.products li.product .button{
  margin-top:12px; display:inline-block; background:var(--pcq-blue-dark); color:#fff;
  border-radius:var(--pcq-radius-pill); padding:10px 22px; font-size:13px; font-weight:600;
}
.pcq-products ul.products li.product .button:hover{ background:var(--pcq-green); }
.pcq-products ul.products li.product .onsale{
  position:absolute; top:14px; left:14px; background:var(--pcq-green); color:#fff;
  font-size:11px; font-weight:700; border-radius:var(--pcq-radius-pill); padding:4px 12px; z-index:2;
}
.pcq-view-all{ text-align:center; margin-top:34px; }
.pcq-empty-note{ text-align:center; color:#9aa5ac; font-style:italic; padding:20px; border:1px dashed var(--pcq-border); border-radius:var(--pcq-radius); }

/* ---------- Product card hover-to-second-image crossfade + slow zoom ---------- */
/* Not scoped to .pcq-products — pcq_loop_product_thumbnail() in functions.php
   replaces WooCommerce's default loop thumbnail globally (shop page, category
   archives, related products, AND the homepage featured-products shortcode),
   so this needs to work wherever "ul.products li.product" appears, not just
   inside our custom homepage markup. Mirrors jmbatteries.com: hovering a
   product card crossfades from the main image to the product's first
   gallery image, plus both images slowly zoom in together (Ken Burns-style)
   for the whole hover duration — a plain instant fade read as too abrupt
   compared to the reference site, so both the fade and the zoom now run
   on a slow, eased transition (0.8s / 1.6s) rather than a quick 0.4s swap.
   overflow:hidden on .pcq-product-thumb clips the zoomed image to the
   card's own rounded corners so it never spills past the card edge.
   Products with no second gallery image simply have no .pcq-img-secondary
   printed, so hovering just zooms the single image — never a broken empty
   flash. */
.pcq-product-thumb{ position:relative; overflow:hidden; border-radius:10px; margin-bottom:14px; }
.pcq-product-thumb img{
  display:block; width:100%; height:auto; border-radius:10px; margin:0 !important;
  transition:opacity .8s ease, transform 1.6s ease;
  transform:scale(1);
}
.pcq-product-thumb .pcq-img-secondary{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
}
li.product:hover .pcq-product-thumb .pcq-img-primary{ opacity:0; }
li.product:hover .pcq-product-thumb .pcq-img-secondary{ opacity:1; }
li.product:hover .pcq-product-thumb img{ transform:scale(1.1); }

/* ---------- Single product image gallery (jmbatteries.com-style layout) ---------- */
/* Astra's own WooCommerce compat stylesheets normally lay the gallery out as
   thumbnails in a row BELOW a full-width main image, but on this site that
   layout was breaking entirely — the flexslider wrapper rendered at its raw
   unclipped width (one <li> per image side by side, e.g. 500% for 5 slides)
   and the thumbnail list fell back to plain stacked <li> "list-item" boxes,
   so the whole gallery just spilled straight down the page. Rather than
   chase the exact stylesheet-loading-order conflict, this rebuilds the
   gallery layout outright on top of WooCommerce's own markup/JS (flexslider
   + PhotoSwipe zoom keep working — we're only restyling, not replacing
   them): thumbnails become a scrollable vertical column on the left,
   the main image is capped to a smaller max-width on the right, and
   prev/next + zoom buttons (added by custom-script.js) overlay the image
   like the reference site. !important is needed throughout because Astra's
   compat CSS and WooCommerce/flexslider's own inline styles both carry
   real specificity here. */
.woocommerce-product-gallery{
  display:flex !important; flex-direction:row-reverse !important; gap:14px;
  align-items:flex-start !important; max-width:460px; position:relative;
}
/* transform:none neutralizes flexslider's own inline translate3d() on this
   element (see below for why we no longer rely on flexslider's positioning
   math at all). */
.woocommerce-product-gallery__wrapper{
  flex:1 1 auto !important; min-width:0 !important; width:auto !important;
  position:relative; border-radius:10px; overflow:hidden !important;
  border:1px solid var(--pcq-border); transform:none !important;
}
/* Slide switching used to rely on flexslider measuring this container's
   width in pixels and translating a wide horizontal track — but on a real
   connection the ~1-2MB full-size zoom image often hasn't finished loading
   the moment flexslider first measures, so it permanently bakes in a
   near-zero width (confirmed live: stuck inline at "width: 4px"/"2px" per
   slide) and every slide past the first renders as blank white space.
   Nudging flexslider to recalculate after the fact (doMath/update/setup)
   did NOT reliably repaint the already-wrong inline styles either. Instead
   of fighting that timing bug, we stop depending on flexslider's own pixel
   math for what's actually VISIBLE: every slide is stacked in the same
   spot (absolute + inset:0) and hidden via opacity, and only the class
   WooCommerce's own gallery JS already toggles correctly regardless of the
   width bug — ".flex-active-slide" — controls which one shows. flexslider
   still runs its normal prev/next/thumbnail-click logic (that class-toggle
   part was never broken), we just no longer care what pixel values it
   computes for position. */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
  margin:0; width:100% !important; float:none !important;
  position:absolute !important; inset:0; opacity:0 !important; pointer-events:none;
  transition:opacity .3s ease;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide{
  position:relative !important; opacity:1 !important; pointer-events:auto; z-index:2;
}
.woocommerce-product-gallery__wrapper img{ width:100%; height:100%; object-fit:contain; display:block; }

.flex-control-thumbs{
  display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important;
  gap:8px; width:72px !important; flex-shrink:0; max-height:460px; overflow-y:auto;
  margin:0 !important; padding:0 !important; list-style:none;
}
.flex-control-thumbs li{
  display:block !important; float:none !important; width:100% !important; margin:0 !important;
}
.flex-control-thumbs li img{
  width:100% !important; height:72px !important; object-fit:cover; border-radius:8px;
  border:2px solid transparent; opacity:.65; cursor:pointer;
  transition:opacity .2s ease, border-color .2s ease;
}
.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover{ opacity:1; border-color:var(--pcq-blue); }

.pcq-gallery-arrow{
  position:absolute !important; top:50% !important; transform:translateY(-50%); z-index:5;
  width:36px !important; height:36px !important; border-radius:50% !important; border:none;
  cursor:pointer; background:rgba(255,255,255,0.9); color:var(--pcq-blue-dark); margin:0; padding:0;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.15); transition:background .2s ease;
}
.pcq-gallery-arrow:hover{ background:#fff; }
.pcq-gallery-arrow-prev{ left:10px !important; right:auto !important; }
.pcq-gallery-arrow-next{ right:10px !important; left:auto !important; }
.pcq-gallery-zoom-btn{
  position:absolute !important; bottom:10px !important; right:10px !important; top:auto !important; z-index:5;
  width:36px !important; height:36px !important; border-radius:50% !important; border:none;
  cursor:pointer; background:rgba(255,255,255,0.9); color:var(--pcq-blue-dark); margin:0; padding:0;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.pcq-gallery-zoom-btn:hover{ background:#fff; }

/* WooCommerce's own zoom trigger (a plain emoji magnifying glass, top-right
   of the image) is redundant now that pcq-gallery-zoom-btn forwards clicks
   to it — hide it rather than show two zoom icons on the same image. */
.woocommerce-product-gallery__trigger{ display:none !important; }

@media (max-width:600px){
  .woocommerce-product-gallery{ flex-direction:column-reverse !important; max-width:100%; }
  .flex-control-thumbs{ flex-direction:row !important; width:100% !important; max-height:none; overflow-x:auto; overflow-y:hidden; }
  .flex-control-thumbs li img{ width:60px !important; height:60px !important; }
  .pcq-gallery-arrow{ width:32px !important; height:32px !important; }
}

/* ---------- Variable product: priceless variations ---------- */
/* Site convention is "no listed price — contact for a quote". For variable
   products, functions.php (pcq_priceless_variation_visible /
   pcq_variation_contact_price_html) keeps priceless variations selectable
   and swaps the empty price for a "Liên hệ để nhận báo giá" label. The one
   remaining stock-WooCommerce artifact is the add-to-cart row: its own JS
   renders the button but flags the wrapper as
   .woocommerce-variation-add-to-cart-disabled when the selected variation
   isn't purchasable — hide that whole row (button + quantity box), matching
   how priceless simple products show no cart button at all. */
.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled{ display:none !important; }
.woocommerce-variation-price .pcq-contact-price{
  color:var(--pcq-green); font-weight:700; font-size:17px;
}
.woocommerce-variation .woocommerce-variation-description{ margin-top:10px; }
/* The attribute dropdown itself — give it a little presence over Astra's
   bare default select styling. */
table.variations select{
  border:1px solid var(--pcq-border); border-radius:8px; padding:8px 12px;
  color:var(--pcq-blue-dark); font-weight:600;
}
table.variations td.label label{ color:var(--pcq-blue-dark); font-weight:700; }

/* ---------- Single product page: phone-CTA line (pcq_product_phone_cta) ---------- */
/* Auto-injected on every product page via woocommerce_single_product_summary
   (priority 25, functions.php) — a highly visible "Liên hệ ... để nhận báo
   giá tốt nhất" line with a click-to-call link, so the fact that this
   catalog doesn't list prices always comes with an obvious next step
   instead of a dead end. Sits in the same visual slot as the add-to-cart
   button (priority 30), which is why it reads naturally for both priced
   products (appears just above Add to cart) and priceless ones (fills the
   gap where the disabled add-to-cart row would have been — see the
   .woocommerce-variation-add-to-cart-disabled rule above). */
.pcq-product-phone-cta{
  display:flex; align-items:center; gap:12px; margin:18px 0;
  padding:14px 18px; border-radius:var(--pcq-radius);
  background:linear-gradient(90deg, rgba(31,122,178,0.08), rgba(76,175,80,0.08));
  border:1.5px solid var(--pcq-green);
}
.pcq-product-phone-cta svg{ width:22px; height:22px; color:var(--pcq-green); flex-shrink:0; }
.pcq-product-phone-cta a{
  font-size:16px; font-weight:800; color:var(--pcq-blue-dark); letter-spacing:.01em;
}
.pcq-product-phone-cta a:hover{ color:var(--pcq-green); }

/* ---------- Category grid ---------- */
.pcq-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pcq-cat-card{
  position:relative; border-radius:var(--pcq-radius); overflow:hidden; min-height:220px;
  display:flex; align-items:flex-end; background:linear-gradient(160deg,var(--pcq-blue),var(--pcq-blue-dark));
}
.pcq-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.pcq-cat-card .pcq-cat-label{ position:relative; z-index:2; padding:20px; color:#fff; font-weight:700; font-size:18px; margin:0; }
.pcq-cat-card .pcq-cat-count{ position:relative; z-index:2; padding:0 20px 16px; color:#dce8f3; font-size:13px; margin-top:-14px; }

/* ---------- About teaser (real office photo + short company intro) ---------- */
/* Sits between the category grid and testimonials — the one real, non-
   placeholder photo of the actual company (office reception with the
   backlit company sign), used to add a human/legitimacy touch mid-page
   rather than bunched with the more data-driven trust badges further
   down. Two-column layout (image | text), stacking on mobile. */
.pcq-about-teaser{
  display:flex; align-items:center; gap:56px;
}
.pcq-about-teaser-image{ flex:1 1 46%; min-width:0; }
.pcq-about-teaser-image img{
  border-radius:var(--pcq-radius); box-shadow:var(--pcq-shadow); width:100%; height:auto;
}
.pcq-about-teaser-content{ flex:1 1 54%; min-width:0; }
.pcq-about-teaser-content h2{ font-size:28px; margin:10px 0 16px; }
.pcq-about-teaser-content p{ color:var(--pcq-text); font-size:15px; line-height:1.75; margin-bottom:26px; }

/* ---------- Testimonials ---------- */
.pcq-testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcq-testimonial-card{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:28px; text-align:center;
}
.pcq-testimonial-card .pcq-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 14px; object-fit:cover; border:3px solid var(--pcq-green-light);
  background:var(--pcq-bg-alt); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--pcq-blue);
}
.pcq-stars{ color:#f5b301; margin-bottom:10px; font-size:15px; }
.pcq-testimonial-card p{ font-style:italic; color:var(--pcq-text); }
.pcq-testimonial-card .pcq-author{ margin-top:12px; font-weight:700; color:var(--pcq-blue-dark); }

/* ---------- Blog ---------- */
.pcq-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcq-blog-card{ background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius); overflow:hidden; transition:box-shadow .25s ease; }
.pcq-blog-card:hover{ box-shadow:var(--pcq-shadow); }
.pcq-blog-card img{ aspect-ratio:16/9; object-fit:cover; }
.pcq-blog-card .pcq-blog-body{ padding:20px; }
.pcq-blog-card .pcq-blog-meta{ font-size:12px; color:#9aa5ac; margin-bottom:8px; }
.pcq-blog-card h3{ font-size:17px; margin:0 0 10px; }
.pcq-blog-card h3 a{ color:var(--pcq-blue-dark); }
.pcq-blog-card a.pcq-read-more{ color:var(--pcq-blue); font-weight:600; font-size:14px; }

/* ---------- Shipping / trust icons ---------- */
.pcq-shipping-strip{ background:var(--pcq-bg-alt); padding:40px 0; }
.pcq-shipping-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.pcq-shipping-item svg{ width:40px; height:40px; color:var(--pcq-blue); margin-bottom:12px; }
.pcq-shipping-item h4{ font-size:15px; margin:0 0 6px; }
.pcq-shipping-item p{ font-size:13px; margin:0; color:var(--pcq-text); }

/* Certification badge row — sits under the shipping icons within the same
   strip. Real certificates held by the manufacturing partner (ISO9001, CE,
   UN38.3, UL, IEC, PSE, EN50549), sourced from the factory profile doc. */
.pcq-cert-row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--pcq-border);
}
.pcq-cert-label{ font-size:13px; font-weight:600; color:var(--pcq-blue-dark); margin-right:6px; }
.pcq-cert-badge{
  font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--pcq-blue-dark);
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius-pill);
  padding:6px 14px;
}

/* ---------- Inverter compatibility strip ---------- */
.pcq-logo-strip{ padding:30px 0; }
.pcq-logo-strip-label{ text-align:center; font-size:13px; color:#9aa5ac; margin-bottom:16px; }
.pcq-logo-strip .pcq-logo-row{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.pcq-logo-strip .pcq-logo-badge{
  font-weight:700; color:var(--pcq-blue-dark); opacity:.55; font-size:15px; letter-spacing:.05em;
  border:1px solid var(--pcq-border); padding:10px 22px; border-radius:var(--pcq-radius-pill);
}

/* ---------- Trust section v2 (redesigned inverter + shipping + certs) ---------- */
/* Replaces the old three disconnected blocks (.pcq-logo-strip /
   .pcq-shipping-strip / .pcq-cert-row) on the homepage — same underlying
   data (pcq_get_inverter_brands() / pcq_get_certifications() + the same 4
   trust points), laid out as one cohesive white section with consistent
   card styling, dividers, and hover states instead of three different
   treatments stacked on alternating backgrounds. The old classes are left
   in place since page-ve-chung-toi.php still uses its own
   .pcq-logo-row/.pcq-logo-badge/.pcq-cert-grid layout. */
.pcq-trust-section{ background:#fff; padding:60px 0; }
.pcq-trust-block{ margin-bottom:44px; }
.pcq-trust-block:last-child{ margin-bottom:0; }
.pcq-trust-heading{
  text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pcq-blue); margin-bottom:24px; display:flex; align-items:center; justify-content:center; gap:12px;
}
.pcq-trust-heading::before, .pcq-trust-heading::after{ content:""; height:1px; width:36px; background:var(--pcq-border); }

.pcq-trust-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.pcq-trust-logo-chip{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--pcq-radius-pill);
  background:var(--pcq-bg-alt); border:1px solid var(--pcq-border); color:var(--pcq-blue-dark);
  font-weight:700; font-size:14px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcq-trust-logo-chip svg{ width:16px; height:16px; color:var(--pcq-green); flex-shrink:0; }
.pcq-trust-logo-chip:hover{ transform:translateY(-3px); box-shadow:var(--pcq-shadow); border-color:var(--pcq-blue); }

.pcq-trust-divider{ height:1px; background:var(--pcq-border); margin:0 0 44px; }

.pcq-trust-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcq-trust-feature{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:28px 20px; text-align:center; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcq-trust-feature:hover{ transform:translateY(-4px); box-shadow:var(--pcq-shadow); border-color:transparent; }
.pcq-trust-feature-icon{
  width:52px; height:52px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(31,122,178,0.12), rgba(76,175,80,0.12));
  color:var(--pcq-blue);
}
.pcq-trust-feature-icon svg{ width:26px; height:26px; }
.pcq-trust-feature .pcq-trust-feature-title{ font-size:15px; margin:0 0 6px; color:var(--pcq-blue-dark); font-weight:700; }
.pcq-trust-feature p{ font-size:13px; margin:0; color:var(--pcq-text); }

.pcq-trust-certs{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.pcq-trust-cert-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--pcq-blue-dark); background:#fff; border:1.5px solid var(--pcq-green); border-radius:var(--pcq-radius-pill);
  padding:9px 18px;
}
.pcq-trust-cert-badge svg{ width:14px; height:14px; color:var(--pcq-green); flex-shrink:0; }

/* ---------- Newsletter / footer ---------- */
.pcq-footer{ background:var(--pcq-blue-dark); color:#c9d7e6; padding-top:60px; }
.pcq-footer h4{ color:#fff; font-size:16px; margin-bottom:18px; }
.pcq-footer a{ color:#c9d7e6; }
.pcq-footer a:hover{ color:var(--pcq-green-light); }
.pcq-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.12); }
.pcq-footer ul{ list-style:none; margin:0; padding:0; }
.pcq-footer ul li{ margin-bottom:10px; font-size:14px; }
.pcq-footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; }
.pcq-footer-contact svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--pcq-green-light); }
.pcq-footer-logo{ max-width:220px; }
.pcq-footer-logo img{
  max-width:100%; width:auto; height:44px; max-height:44px;
  object-fit:contain; object-position:left center; margin-bottom:14px;
}
.pcq-footer-company-name{
  font-size:12px; line-height:1.6; color:#9fb3c8; margin:0 0 16px; max-width:260px;
}

.pcq-newsletter-form{ display:flex; margin-top:10px; border-radius:var(--pcq-radius-pill); overflow:hidden; background:#fff; }
.pcq-newsletter-form input{ flex:1; min-width:0; border:none; padding:12px 18px; font-size:14px; outline:none; }
.pcq-newsletter-form button{
  border:none; background:var(--pcq-green); color:#fff; padding:0 22px; font-weight:600; cursor:pointer; flex-shrink:0;
}
.pcq-newsletter-form button:hover{ background:var(--pcq-blue); }

.pcq-bottom-bar{ padding:20px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:10px; }
.pcq-socials{ display:flex; gap:12px; }
.pcq-socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
}
.pcq-socials a:hover{ background:var(--pcq-green); border-color:var(--pcq-green); }
.pcq-socials svg{ width:16px; height:16px; }
/* Zalo footer icon is a text badge ("Zalo"), not an svg like FB/YouTube —
   no universally-safe vector logo path for Zalo to hand-draw accurately,
   so it reuses the same 34px circle/border/hover treatment as its siblings
   with a smaller font size so the word fits inside the circle. */
.pcq-socials .pcq-social-zalo{ font-size:10px; font-weight:800; letter-spacing:-0.02em; }

/* ---------- Zalo float button ---------- */
.pcq-zalo-float{
  position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; align-items:center; gap:10px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.2));
}
.pcq-zalo-float .pcq-zalo-icon{
  width:56px; height:56px; border-radius:50%; background:#0068ff; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:13px; position:relative;
}
.pcq-zalo-pulse{
  position:absolute; inset:0; border-radius:50%; background:rgba(0,104,255,.35); animation:pcqZaloPulse 2s ease-out infinite;
}
@keyframes pcqZaloPulse{ 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(1.7);opacity:0;} }

/* ---------- Mobile menu drawer ---------- */
/* !important on both rules: Astra ships a generic ".is-open" utility class
   used by its own mobile menu system, and its stylesheet loads after ours
   is registered as a dependency — without !important its rule (or higher
   specificity elsewhere) silently won the cascade, so clicking the
   hamburger toggled the class but the drawer never visibly slid in. */
.pcq-mobile-drawer{
  position:fixed !important; inset:0; background:#fff; z-index:1000; transform:translateX(-100%) !important;
  transition:transform .3s ease; padding:24px; overflow-y:auto;
}
.pcq-mobile-drawer.is-open{ transform:translateX(0) !important; }
.pcq-mobile-drawer ul{ list-style:none; padding:0; }
.pcq-mobile-drawer a{ display:block; padding:14px 0; border-bottom:1px solid var(--pcq-border); color:var(--pcq-blue-dark); font-weight:600; }
.pcq-mobile-close{ background:none; border:none; font-size:26px; color:var(--pcq-blue-dark); position:absolute; top:20px; right:20px; }

/* ==========================================================================
   "Về chúng tôi" page (page-ve-chung-toi.php) — factory capability content.
   Reuses the same section/eyebrow/container patterns as the homepage.
   ========================================================================== */
.pcq-about-hero{
  background:linear-gradient(120deg, #0F2A4A 0%, #1F7AB2 100%); color:#fff;
  padding:64px 0; text-align:center;
}
.pcq-about-hero h1{ color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); margin:10px 0 14px; }
.pcq-about-hero p{ color:#dce8f3; max-width:640px; margin:0 auto; font-size:17px; }

.pcq-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pcq-stat-card{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:28px 20px; text-align:center;
}
.pcq-stat-card .pcq-stat-value{ font-size:30px; font-weight:800; color:var(--pcq-blue); margin-bottom:6px; }
.pcq-stat-card .pcq-stat-label{ font-size:14px; color:var(--pcq-text); }

.pcq-cert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pcq-cert-card{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:22px 14px; text-align:center; font-weight:700; color:var(--pcq-blue-dark);
}
.pcq-about-note{
  max-width:760px; margin:36px auto 0; font-size:14px; color:#9aa5ac; text-align:center; line-height:1.7;
}

/* ---------- Company info + mission/vision + insert images (page-ve-chung-toi.php) ---------- */
.pcq-company-info{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius);
  padding:32px; text-align:center; box-shadow:var(--pcq-shadow);
}
.pcq-company-info h2{ font-size:20px; margin:0 0 14px; line-height:1.4; }
.pcq-company-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.pcq-company-meta span{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--pcq-blue-dark);
}
.pcq-company-meta svg{ width:16px; height:16px; color:var(--pcq-green); flex-shrink:0; }

.pcq-mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
.pcq-mv-card{
  background:#fff; border:1px solid var(--pcq-border); border-radius:var(--pcq-radius); padding:28px;
}
.pcq-mv-card h3{ font-size:17px; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.pcq-mv-card h3 svg{ width:22px; height:22px; color:var(--pcq-green); flex-shrink:0; }
.pcq-mv-card p{ font-size:14px; color:var(--pcq-text); line-height:1.75; margin:0; }

.pcq-about-image{ margin-top:36px; text-align:center; }
.pcq-about-image img{ max-width:100%; border-radius:var(--pcq-radius); box-shadow:var(--pcq-shadow); margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .pcq-products ul.products{ grid-template-columns:repeat(3,1fr); }
  .pcq-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .pcq-testimonials, .pcq-blog-grid{ grid-template-columns:repeat(2,1fr); }
  .pcq-shipping-grid{ grid-template-columns:repeat(2,1fr); }
  .pcq-footer-grid{ grid-template-columns:1fr 1fr; }
  .pcq-hero-illustration{ display:none; }
  .pcq-hero-inner{ justify-content:center; }
  .pcq-hero-content{ text-align:center; }
  .pcq-hero-content .pcq-btn{ margin:0 auto; }
  .pcq-stat-grid, .pcq-cert-grid{ grid-template-columns:repeat(2,1fr); }
  .pcq-trust-features{ grid-template-columns:repeat(2,1fr); }
  .pcq-about-teaser{ gap:32px; }
}
@media (max-width:767px){
  .pcq-nav, .pcq-topbar-right{ display:none; }
  .pcq-mobile-toggle{ display:inline-flex; }
  .pcq-products ul.products{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .pcq-cat-grid, .pcq-testimonials, .pcq-blog-grid, .pcq-shipping-grid{ grid-template-columns:1fr 1fr; }
  .pcq-footer-grid{ grid-template-columns:1fr; }
  .pcq-hero-content{ padding:40px 0; }
  .pcq-hero-content h1{ font-size:2rem; }
  .pcq-hero-content p{ font-size:16px; }
  .pcq-section{ padding:48px 0; }
  .pcq-section-head h2{ font-size:26px; }
  .pcq-hero-arrow{ display:none !important; }
  .pcq-hero-dots{ bottom:10px !important; }
  .pcq-mv-grid{ grid-template-columns:1fr; }
  .pcq-company-meta{ flex-direction:column; align-items:center; gap:10px; }
  .pcq-product-phone-cta{ flex-wrap:wrap; }
  .pcq-product-phone-cta a{ font-size:14px; }
  .pcq-about-teaser{ flex-direction:column; gap:28px; }
  .pcq-about-teaser-content{ text-align:center; }
  .pcq-about-teaser-content h2{ font-size:22px; }
}
@media (max-width:480px){
  .pcq-cat-grid, .pcq-testimonials, .pcq-blog-grid, .pcq-shipping-grid, .pcq-products ul.products{ grid-template-columns:1fr; }
  .pcq-newsletter-form{ flex-direction:column; border-radius:var(--pcq-radius); }
  .pcq-newsletter-form button{ padding:12px 22px; }
  .pcq-stat-grid, .pcq-cert-grid{ grid-template-columns:1fr 1fr; }
  .pcq-trust-features{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Homepage only: replace Astra's default header/footer chrome with our
   fully custom Plus CQ header/footer, and let sections run full width.
   Scoped to body.pcq-front-page so every other page keeps Astra's UI.

   Astra's ".ast-container" / "#content" are part of its flex-based content +
   sidebar column system. Since our homepage markup doesn't use Astra's
   expected #primary/#secondary column structure, that flex layout was
   turning each of our top-level sections into side-by-side flex columns
   instead of normal stacked blocks — hence the broken "everything in one
   horizontal row" rendering. Forcing block display below fixes it.
   ========================================================================== */
body.pcq-front-page header#masthead,
body.pcq-front-page .site-header,
body.pcq-front-page footer#colophon,
body.pcq-front-page .site-footer,
body.pcq-front-page .ast-scroll-top-container{
  display:none !important;
}
body.pcq-front-page #page,
body.pcq-front-page #content,
body.pcq-front-page #content > *,
body.pcq-front-page .ast-container,
body.pcq-front-page .ast-container > *,
body.pcq-front-page .pcq-page{
  display:block !important;
  flex:none !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  float:none !important;
}
body.pcq-front-page{ overflow-x:hidden; }