/* The shared top banner (.banner-home-scrollup.not-home-page, used only by
this page and allpro.blade.php) inherits a homepage-hero rule that forces
the image to near-viewport height via `height:calc(100vh - ...)` /
`height:100vh` with object-fit:cover — fine for a full-bleed homepage
hero, but it badly zoom-crops this section's much wider (~3:1) banner
image into a tall sliver. Let it size by its own aspect ratio instead. */
.banner-home-scrollup.not-home-page .banner-home-scrollup-inner img.responsive { height: auto !important; max-height: 420px; object-fit: contain !important; }
/* Product category page redesign (2026-09-05) — scoped under .procat-redesign so it
only affects pro_categories/view.blade.php. Loaded alongside homepage-redesign.css
on this page (this page extends `indexp`, not `indexp_en`, so neither file is
loaded by the shared layout — see the inline at the top of
pro_categories/view.blade.php). Reuses .hp-btn / .hp-stats / .hp-cta-band from
homepage-redesign.css rather than duplicating them here. */
.procat-redesign { color: #16305c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.procat-redesign section { height: auto; }
/* ---- Hero ----
Text-only: no per-category illustration exists (the site's one shared
marketing image lives separately in the pre-existing top
.banner-home-scrollup strip, untouched by this page — see the note
above pro_categories/view.blade.php's hero markup). A couple of soft
CSS-only blobs fill the background so the section doesn't read as
empty without needing any image content. */
.procat-hero { position: relative; overflow: hidden; background: linear-gradient(120deg,#eaf1ff 0%,#dce9ff 60%,#cfe0ff 100%); padding: 28px 0; }
.procat-hero:before, .procat-hero:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); z-index: 0; }
.procat-hero:before { width: 260px; height: 260px; top: -110px; right: 8%; }
.procat-hero:after { width: 170px; height: 170px; bottom: -90px; right: 22%; background: rgba(255,255,255,.25); }
.procat-hero-inner { position: relative; z-index: 1; }
.procat-hero-text { max-width: 720px; }
.procat-eyebrow { display: inline-block; background: #fff; color: #1e5fcc; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; }
.procat-hero-text h1 { font-size: 34px; font-weight: 700; line-height: 1.25; color: #16305c; margin: 0 0 10px; }
.procat-hero-desc { font-size: 16px; color: #3c4a63; line-height: 1.6; margin: 0 0 16px; max-width: 640px; }
.procat-trust-row { display: flex; gap: 28px; flex-wrap: wrap; }
.procat-trust-row > div { display: flex; align-items: center; gap: 10px; }
.procat-trust-row .icon-circle { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.procat-trust-row .icon-circle svg { width: 18px; height: 18px; color: #1e5fcc; }
.procat-trust-row span { font-size: 13px; font-weight: 700; color: #16305c; line-height: 1.3; }
@media (max-width: 991px) {
.procat-hero { padding: 22px 0; }
.procat-hero:before { width: 180px; height: 180px; top: -70px; right: -40px; }
.procat-hero:after { display: none; }
}
@media (max-width: 767px) {
.procat-hero-text h1 { font-size: 24px; }
.procat-trust-row { gap: 14px 20px; }
}
/* ---- Product card grid ---- */
.procat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 991px) { .procat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575px) { .procat-grid { grid-template-columns: 1fr; } }
.procat-card { display: flex; flex-direction: column; background: #fff !important; border: 1px solid #ecf0f7; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(22,48,92,.06); transition: transform .15s ease, box-shadow .15s ease; }
.procat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(22,48,92,.12); }
.procat-card-img { display: block; padding: 20px; background: #f7f9fc; text-align: center; }
.procat-card-img img { width: 100%; max-width: 140px; height: 110px; object-fit: contain; }
.procat-card-body { padding: 4px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.procat-card-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.4; }
.procat-card-title a { color: #16305c !important; text-decoration: none !important; }
.procat-card-desc { font-size: 13px; color: #5b6b85; line-height: 1.6; margin: 0 0 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.procat-card-actions { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.procat-card-link { font-size: 13px; font-weight: 700; color: #1e5fcc !important; text-decoration: none !important; }
.procat-card-btn { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 8px; background: #ff7a00 !important; color: #fff !important; text-decoration: none !important; white-space: nowrap; }
.procat-card-btn:hover { color: #fff !important; }
.procat-card-zalo { margin-left: auto; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #eef4ff; display: flex; align-items: center; justify-content: center; color: #1e5fcc; }
.procat-card-zalo svg { width: 16px; height: 16px; }
/* Pagination links ({%PAGINATION%}) render as bare / with no gap
between them site-wide (styles.css `.pagin a,.pagin strong` sets only
color/background) — add spacing here rather than editing the shared rule. */
.procat-redesign .pagin a, .procat-redesign .pagin strong { display: inline-block; margin: 0 3px; padding: 6px 12px; }
/* ---- Sidebar (col_left_p.blade.php) ---- */
/* The site-wide `.widget_categories li a` rule (styles.css) paints every row
solid blue with a Font Awesome arrow — both more specific than a plain
class selector here, so every override below needs !important to win. */
.procat-sidebar-cats { list-style: none; margin: 0; padding: 0; }
.procat-sidebar-cats li { border-bottom: 1px solid #f0f3f9; padding-bottom: 0 !important; }
.procat-sidebar-cats li:last-child { border-bottom: none; }
.procat-sidebar-cats a { display: flex !important; align-items: center; gap: 10px; padding: 12px 6px !important; min-height: 0 !important; text-decoration: none !important; background: transparent !important; color: #3c4a63 !important; font-size: 14px; font-weight: 600; border-radius: 8px; }
.procat-sidebar-cats a::before { content: none !important; }
.procat-sidebar-cats a img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.procat-sidebar-cats a.active { background: #eef4ff !important; color: #1e5fcc !important; }
.procat-sidebar-cta { margin-top: 18px; background: #f7f9fc; border: 1px solid #ecf0f7; border-radius: 12px; padding: 18px; text-align: center; }
.procat-sidebar-cta .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #eef4ff; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.procat-sidebar-cta .icon-circle svg { width: 22px; height: 22px; color: #1e5fcc; }
.procat-sidebar-cta p { font-size: 13px; color: #3c4a63; margin: 0 0 14px; }
.procat-sidebar-cta .hp-btn { width: 100%; justify-content: center; padding: 10px; font-size: 13px; }
/* Mobile: sidebar category list becomes a collapsed dropdown */
.procat-sidebar-toggle { display: none; }
@media (max-width: 991px) {
.procat-sidebar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fff; border: 1px solid #dce4f0; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: #16305c; margin-bottom: 12px; }
.procat-sidebar-toggle svg { width: 16px; height: 16px; transition: transform .15s ease; }
.procat-sidebar-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.procat-sidebar-cats-wrap { border: 1px solid #dce4f0; border-radius: 10px; padding: 6px; margin-bottom: 12px; }
/* Takes up a full screen's worth of space right above the product grid
on mobile; the same consultation CTA already exists further down in
.procat-cta-band ("Chua tim thay giai phap phu hop?"), so nothing is
lost by hiding this smaller copy here. */
.procat-sidebar-cta { display: none; }
}
/* ---- Bottom CTA/stats bands (structure reused from .hp-cta-band / .hp-stats,
only the icon wrapper here is new) ---- */
.procat-cta-band .row { align-items: center; }
.procat-cta-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; margin-right: 8px; }
.procat-cta-icon svg { width: 28px; height: 28px; color: #fff; }
.procat-cta-band .row > div:nth-child(2) { flex: 1 1 320px; }
.procat-cta-band h3 { margin-bottom: 6px !important; }
.procat-cta-band p { color: rgba(255,255,255,.85); font-size: 14px; margin: 0; }