/* ==========================================================================
   Shenzhen HXY Elec. Ltd. / NewSky Industrial Ltd.
   Responsive theme built on Bootstrap 5  (mobile-first)
   ========================================================================== */
@import url("../assets/bootstrap/css/bootstrap.min.css");

:root{
  --brand:#007cc2;
  --brand-dark:#00629b;
  --brand-darker:#004c7a;
  --brand-light:#e6f4fc;
  --accent:#007cc2;
  --accent-light:#e6f4fc;
  --hot:#eb4e08;
  --ink:#222222;
  --body:#555555;
  --muted:#888888;
  --line:#e3eaef;
  --soft:#f5f9fc;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  color:var(--body);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.6;
  background:#ffffff;
}

a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);text-decoration:underline;}
img{max-width:100%;height:auto;}

#page{width:100%;margin:0;}

.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}
@media (min-width:1200px){ .container{max-width:1160px;} }

/* ---------- Top bar ---------- */
.site-topbar{background:var(--brand-dark);color:#d9ecfa;font-size:12px;padding:5px 0;}
.site-topbar .topbar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;}
.site-topbar a{color:#d9ecfa;text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-right:12px;}
.site-topbar a:hover{color:#ffffff;text-decoration:none;}
.site-topbar img{height:13px;width:auto;border-radius:2px;}
.site-topbar .topbar-contact{white-space:nowrap;}
.site-topbar .topbar-contact i{color:#9fd2ef;margin-right:4px;}
@media (max-width:991.98px){ .site-topbar{display:none;} }
@media (max-width:767.98px){
  .site-topbar{font-size:11px;}
  .site-topbar a{margin-right:8px;}
  .site-topbar a span.txt{display:none;}
}

/* ---------- Header / navbar ---------- */
.site-header{background:#ffffff;border-bottom:3px solid var(--brand);position:sticky;top:0;z-index:1030;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.site-header .navbar{padding:14px 0;}
.navbar-brand{padding:0;}
.navbar-brand img{height:56px;width:auto;}
@media (max-width:575.98px){ .navbar-brand img{height:40px;} }
.site-nav .nav-link{font-weight:600;color:#4a4a4a;padding:10px 46px;font-size:15px;}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--brand);}
.site-nav .nav-link.active{border-bottom:2px solid var(--brand);}
@media (min-width:992px) and (max-width:1199.98px){
  .site-nav .nav-link{padding:10px 36px;}
}
.navbar-toggler{border:0;padding:6px 4px;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23007cc2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.site-search{position:relative;}
.site-search .form-control{border-radius:20px 0 0 20px;border-right:0;background:#f5f8fa;font-size:13px;min-width:150px;}
.site-search .btn{border-radius:0 20px 20px 0;background:var(--brand);border-color:var(--brand);color:#fff;}
.site-search .btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
@media (max-width:991.98px){
  .navbar-collapse{background:#fff;border-top:1px solid var(--line);margin-top:8px;padding:8px 4px;}
  .site-nav .nav-link.active{border-bottom:0;}
  .site-nav .nav-link{border-bottom:1px solid #f2f2f2;padding:11px 6px;}
}

/* ---------- Hero carousel ---------- */
.hero{position:relative;background:#0d1b28;overflow:hidden;}
.hero .carousel-inner{aspect-ratio:1080/460;max-height:460px;}
.hero .carousel-item,.hero .carousel-item img{width:100%;height:100%;}
.hero .carousel-item img{object-fit:cover;}
.hero .carousel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,38,.62) 0%,rgba(8,24,38,.28) 45%,rgba(8,24,38,0) 75%);}
.hero .carousel-caption{left:0;right:auto;bottom:auto;top:50%;transform:translateY(-50%);text-align:left;padding:0 5%;max-width:640px;z-index:3;}
.hero .carousel-caption .cap-kicker{color:#a9dcf5;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.hero .carousel-caption h2{color:#fff;font-size:32px;font-weight:800;line-height:1.25;margin:0 0 10px;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.hero .carousel-caption p{color:#e6f4fc;font-size:15px;margin-bottom:16px;}
.hero .carousel-indicators{margin-bottom:12px;}
.hero .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.6;border:0;margin:0 4px;}
.hero .carousel-indicators .active{background:var(--brand);opacity:1;}
@media (max-width:991.98px){
  .hero .carousel-caption h2{font-size:24px;}
  .hero .carousel-caption p{display:none;}
}
@media (max-width:575.98px){
  .hero .carousel-inner{aspect-ratio:16/11;}
  .hero .carousel-caption h2{font-size:18px;}
  .hero .carousel-caption .cap-kicker{font-size:11px;letter-spacing:1px;}
  .hero .carousel-caption .btn{font-size:12px;padding:5px 12px;}
}
@media (max-width:575.98px){ .hero .carousel-item::after{background:linear-gradient(90deg,rgba(8,24,38,.72) 0%,rgba(8,24,38,.4) 60%,rgba(8,24,38,.15) 100%);} }

.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:22px;font-weight:600;padding:8px 22px;}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}

/* ---------- Inner page banner (short, 350px) ---------- */
.page-banner{position:relative;height:350px;overflow:hidden;background:#0d1b28;}
.page-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,38,.55) 0%,rgba(8,24,38,.2) 55%,rgba(8,24,38,0) 85%);}
.page-banner-caption{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;padding:0 5%;max-width:1160px;margin:0 auto;}
.page-banner-caption .cap-kicker{color:#a9dcf5;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.page-banner-caption h2{color:#fff;font-size:26px;font-weight:800;line-height:1.25;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.35);}
@media (max-width:991.98px){
  .page-banner{height:240px;}
  .page-banner-caption h2{font-size:20px;}
}
@media (max-width:575.98px){
  .page-banner{height:150px;}
  .page-banner-caption .cap-kicker{font-size:10px;letter-spacing:1px;}
  .page-banner-caption h2{font-size:15px;}
}

/* ---------- Page body layout ---------- */
.page-content{padding:26px 0 10px;}
.page-content .row{--bs-gutter-x:1.5rem;}

/* ---------- Cards / generic blocks ---------- */
.section-title{position:relative;font-size:20px;font-weight:700;color:var(--ink);margin:0 0 6px;padding-left:14px;line-height:1.3;}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:20px;background:var(--brand);border-radius:3px;}
.section-sub{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;padding-left:14px;}

.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.panel-body{padding:16px;}

/* #right / content head (title bar) */
#right{width:auto;}
#right #title{font-size:19px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:8px;margin-bottom:16px;line-height:1.4;}
#right #title a{color:var(--ink);}
#right #title a:hover{color:var(--brand);}
#right #title .dot{background:var(--brand-light);border-radius:4px;padding:2px 8px;font-size:13px;}
#right #productlist{width:auto;font-size:14px;}

/* ---------- Category sidebar ---------- */
.cat-panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.cat-panel .cat-head{display:flex;align-items:center;justify-content:space-between;background:var(--brand);color:#fff;font-size:15px;font-weight:600;padding:11px 14px;}
.cat-panel .cat-head i{color:#bfe2f5;}
.cat-toggle{display:none;width:100%;border:0;background:var(--brand);color:#fff;font-weight:600;text-align:left;padding:12px 14px;font-size:15px;}
.cat-toggle .arrow{float:right;transition:transform .25s;}
.cat-list{list-style:none;margin:0;padding:0;}
.cat-list .ulist{margin:0;}
.cat-list .ulist > a{display:block;padding:10px 14px;font-weight:600;color:#333;border-bottom:1px solid #edf3f7;background:#f8fbfd;font-size:14px;}
.cat-list .ulist > a:hover{background:var(--brand-light);color:var(--brand-dark);text-decoration:none;}
.cat-list .list{margin:0;}
.cat-list .list > a{display:block;padding:8px 14px 8px 26px;font-size:13px;color:#666;border-bottom:1px dashed #eee;position:relative;}
.cat-list .list > a::before{content:"›";position:absolute;left:13px;color:var(--brand);font-weight:700;}
.cat-list .list > a:hover{color:var(--accent);background:#f7fbfe;text-decoration:none;}
@media (max-width:991.98px){
  .cat-panel .cat-head{display:none;}
  .cat-toggle{display:block;}
  .cat-panel .cat-list{border-top:1px solid var(--line);}
}

/* ---------- Product grid ---------- */
#list000{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:4px 0;width:100%;float:none;margin:0;}
.plist{list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s,transform .2s;float:none;width:auto;height:auto;}
.plist:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(0,124,194,.15);transform:translateY(-3px);}
.plist > a{display:block;}
.plist img{width:100%;aspect-ratio:1/1;object-fit:contain;border:1px solid #f0f0f0;border-radius:6px;padding:4px;background:#fff;margin:0;}
.plist .ptext{font-size:12px;line-height:1.45;margin-top:8px;color:#444;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.plist .ptext a{color:#444;}
.plist .ptext a:hover{color:var(--brand);}
@media (max-width:575.98px){ #list000{grid-template-columns:repeat(2,1fr);gap:10px;} .plist{padding:8px;} }

/* ---------- Content blocks (about / news / show info) ---------- */
.blocks{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:22px;width:auto;float:none;}
.blocks:first-child{margin-top:0;}
.blocks .ttitle{font-size:16px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:8px;margin-bottom:14px;}
.blocks table{width:100% !important;border:0;}
.blocks table td{vertical-align:top;padding:4px;}
.blocks table td img{max-width:100%;height:auto;border:1px solid #e4e7e4;border-radius:6px;}
.newsli{list-style:none;float:none;width:100%;height:auto;line-height:1.5;border-bottom:1px dashed #eee;padding:7px 0;font-size:13px;}
.newsli:last-child{border-bottom:0;}
.newsli a{color:#555;}
.newsli a:hover{color:var(--brand);}
.showdetails{font-size:14px;color:#444;padding:2px 4px;}
.showlink a{color:var(--accent);font-weight:600;}
@media (max-width:575.98px){
  .blocks table,.blocks tbody,.blocks tr,.blocks td{display:block;width:100% !important;}
  .blocks table td{padding:2px 0;}
  .blocks table td img{margin-bottom:8px;}
}

/* ---------- Pagination ---------- */
#pagecontex{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;width:100%;float:none;margin:0;}
.pageclass,.pageclass2{min-width:34px;height:34px;line-height:32px;text-align:center;border:1px solid var(--line);border-radius:8px;list-style:none;float:none;margin:0;font-size:13px;background:#fff;}
.pageclass a{display:block;color:#555;padding:0 8px;}
.pageclass a:hover{text-decoration:none;color:#fff;}
.pageclass:hover{background:var(--brand);border-color:var(--brand);}
.pageclass2{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;padding:0 8px;}

/* ---------- About / Contact text ---------- */
.companydesctitle{font-size:16px;font-weight:700;color:var(--ink);border-left:4px solid var(--brand);padding-left:10px;margin:18px 0 10px;}
.companydesc{font-size:14px;line-height:1.85;color:var(--body);}
.companydesc img.map{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;padding:3px;background:#fff;}
.titlelist{width:100%;border-bottom:1px solid var(--line);color:#666;font-size:14px;padding-bottom:6px;margin:14px 0;}

/* ---------- Certifications ---------- */
.cert{list-style:none;width:100%;margin:0;padding:8px 0;text-align:center;}
.cert img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff;}
.certdesc{font-size:14px;color:#666;text-align:center;padding-bottom:6px;}
@media (max-width:575.98px){
  .cert-table,.cert-table tbody,.cert-table tr,.cert-table td{display:block;width:100%;}
  .cert-table td{padding-bottom:12px;}
}

/* ---------- Product detail ---------- */
.producttitle{font-size:20px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:4px;}
.producttitle2{font-size:14px;color:var(--muted);margin-bottom:14px;}
#right table{max-width:100%;}
#right table[width]{width:100% !important;}
#picshow{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;}
.piclist{list-style:none;float:left;padding:8px;width:auto;height:auto;}
.piclist img{width:75px;height:75px;border:1px solid var(--line);border-radius:6px;object-fit:contain;}

/* ---------- Product gallery (big image + thumbnail strip) ---------- */
.pd-gallery{margin-bottom:18px;}
.pd-main{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  height:400px;display:flex;align-items:center;justify-content:center;padding:10px;}
.pd-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.pd-main .pd-empty{color:#b8c8d4;font-size:14px;}
.pd-thumbs-wrap{position:relative;padding:0 40px;margin-top:12px;}
.pd-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding:2px;scrollbar-width:thin;}
.pd-thumbs::-webkit-scrollbar{height:6px;}
.pd-thumbs::-webkit-scrollbar-thumb{background:#cfdde8;border-radius:3px;}
.pd-thumbs::-webkit-scrollbar-track{background:transparent;}
.pd-thumb{flex:0 0 auto;width:96px;height:96px;border:2px solid var(--line);border-radius:8px;background:#fff;
  overflow:hidden;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s;outline:none;}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-thumb:hover{opacity:.85;}
.pd-thumb.active{opacity:1;border-color:var(--brand);}
.pd-nav{position:absolute;top:0;width:32px;height:100%;border:1px solid var(--line);background:#fff;border-radius:8px;
  color:var(--brand);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.pd-nav:hover{background:var(--brand-light);border-color:var(--brand);}
.pd-nav[disabled]{opacity:.3;cursor:default;background:#fff;}
.pd-prev{left:0;}
.pd-next{right:0;}
@media (max-width:767.98px){
  .pd-main{height:260px;}
  .pd-thumbs-wrap{padding:0;}
  .pd-nav{display:none;}
  .pd-thumb{width:72px;height:72px;}
}

.infotitle{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;}

/* ---------- Footer ---------- */
.site-footer{background:#16222e;color:#a8c2d4;margin-top:44px;}
.site-footer a{color:#a8c2d4;}
.site-footer a:hover{color:#fff;text-decoration:none;}
.footer-main{padding:40px 0 28px;}
.footer-brand img{height:44px;width:auto;background:#fff;border-radius:6px;padding:4px;margin-bottom:12px;}
.footer-about{font-size:13px;line-height:1.8;color:#93aec1;}
.footer-title{color:#fff;font-size:15px;font-weight:600;margin:0 0 16px;position:relative;padding-left:12px;}
.footer-title::before{content:"";position:absolute;left:0;top:3px;width:4px;height:15px;background:var(--brand);border-radius:2px;}
.footer-contact{list-style:none;margin:0;padding:0;font-size:13px;}
.footer-contact li{display:flex;gap:8px;margin-bottom:11px;line-height:1.6;}
.footer-contact li i{color:var(--brand);margin-top:3px;}
.footer-links{list-style:none;margin:0;padding:0;font-size:13px;}
.footer-links li{margin-bottom:10px;}
.footer-links li a{position:relative;padding-left:14px;}
.footer-links li a::before{content:"›";position:absolute;left:0;color:var(--brand);font-weight:700;}
.footer-partners{text-align:center;margin-top:24px;}
.footer-partners img{max-width:100%;height:auto;background:#fff;border-radius:8px;padding:6px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:14px 0;font-size:12px;color:#8ba7ba;text-align:center;}
@media (max-width:575.98px){ .site-footer{text-align:left;} .footer-main{padding:28px 0 18px;} }

/* ---------- Search page ---------- */
.search-result h4{font-size:15px;}