* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; line-height: 1.8; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Navbar */
.navbar { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding-top: 0; padding-bottom: 0; }
.navbar-brand { display: flex; align-items: center; padding: 10px 0; }
.navbar-brand img { height: 40px; width: auto; }
.navbar-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.navbar-toggle span { display: block; width: 24px; height: 2px; background: #333; margin: 5px 0; transition: 0.3s; }
.nav-menu { display: flex; list-style: none; align-items: center; }
.nav-menu > li { position: relative; }
.nav-menu > li > a { display: block; padding: 20px 15px; font-size: 14px; color: #333; transition: color 0.3s; }
.nav-menu > li > a:hover { color: #0257ea; }
.nav-menu .caret { margin-left: 4px; font-size: 10px; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; z-index: 1001; border-radius: 4px; }
.dropdown-menu li { position: relative; }
.dropdown-menu li a { display: block; padding: 10px 20px; font-size: 13px; color: #333; white-space: nowrap; }
.dropdown-menu li a:hover { background: #f5f5f5; color: #0257ea; }
.nav-menu > li:hover > .dropdown-menu { display: block; }
.dropdown-submenu > .dropdown-menu { left: 100%; top: 0; }
.dropdown-submenu:hover > .dropdown-menu { display: block; }

/* Slider */
.slider { position: relative; width: 100%; height: 70vh; min-height: 400px; background: url('../images/hero-banner.jpg') center center / cover no-repeat; background-color: #ccc; }
.slider .container { position: relative; height: 100%; display: flex; align-items: center; }
.slide-caption { color: #fff; max-width: 600px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.slide-caption h2 { font-size: 42px; margin-bottom: 15px; font-weight: 700; }
.slide-caption p { font-size: 18px; margin-bottom: 25px; opacity: 0.95; }
.flex-btn { display: inline-block; padding: 12px 30px; background: #0257ea; color: #fff; border-radius: 4px; font-size: 15px; transition: background 0.3s; }
.flex-btn:hover { background: #0145b8; color: #fff; }

/* Header Title */
.header-title { text-align: center; padding: 40px 20px; background: #f8f9fa; }
.header-title h2 { font-size: 22px; color: #555; font-weight: 400; }

/* Service Section */
.service { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h1 { font-size: 30px; margin-bottom: 15px; color: #222; }
.section-title p { font-size: 15px; color: #666; max-width: 800px; margin: 0 auto; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.service-box { background: #fff; padding: 30px 20px; border-radius: 8px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #eee; }
.service-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.service-icon { font-size: 36px; margin-bottom: 15px; }
.service-box h4 { font-size: 15px; margin-bottom: 10px; color: #222; font-weight: 600; min-height: 44px; }
.service-box p { font-size: 13px; color: #777; line-height: 1.7; }
.service-box a { color: inherit; }
.service-box a:hover h4 { color: #0257ea; }
.btn-wrap { text-align: center; margin-top: 40px; }
.btn-wrap a { display: inline-block; padding: 12px 35px; background: #0257ea; color: #fff; border-radius: 4px; font-size: 15px; transition: background 0.3s; }
.btn-wrap a:hover { background: #0145b8; }

/* Portfolio Section */
.portfolio { padding: 60px 0; background: #f8f9fa; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.portfolio-item { background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.portfolio-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.portfolio-info { padding: 20px; }
.portfolio-info h4 { font-size: 16px; margin-bottom: 8px; color: #222; }
.portfolio-info p { font-size: 13px; color: #777; line-height: 1.7; }
.portfolio-info a:hover { color: #0257ea; }

/* Page Content */
.page-header { background: linear-gradient(135deg, #0257ea 0%, #0145b8 100%); color: #fff; padding: 60px 0 40px; }
.page-header h1 { font-size: 32px; margin-bottom: 10px; }
.page-header .breadcrumb { font-size: 13px; opacity: 0.8; }
.page-header .breadcrumb a { color: #fff; opacity: 0.8; }
.page-header .breadcrumb a:hover { opacity: 1; }
.page-content { padding: 50px 0; }
.page-content h2 { font-size: 24px; color: #222; margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 2px solid #0257ea; display: inline-block; scroll-margin-top: 80px; }

.toc-toggle { position: fixed; right: 20px; bottom: 30px; width: 44px; height: 44px; background: #0257ea; color: #fff; border: none; border-radius: 50%; font-size: 18px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 900; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
.toc-toggle:hover { background: #0145b8; }
.toc-panel { position: fixed; right: 20px; bottom: 82px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 12px 16px; z-index: 900; display: none; min-width: 140px; }
.toc-panel.show { display: block; }
.toc-panel a { display: block; padding: 6px 0; color: #555; font-size: 13px; text-decoration: none; border-bottom: 1px solid #f0f0f0; transition: color 0.2s; }
.toc-panel a:last-child { border-bottom: none; }
.toc-panel a:hover { color: #0257ea; }
@media (max-width: 480px) { .toc-toggle { right: 12px; bottom: 20px; width: 38px; height: 38px; font-size: 15px; } .toc-panel { right: 12px; bottom: 66px; } }
.page-content h3 { font-size: 18px; color: #333; margin: 25px 0 10px; }
.page-content p { margin-bottom: 15px; color: #555; }
.page-content ul, .page-content ol { margin: 15px 0; padding-left: 25px; }
.page-content li { margin-bottom: 8px; color: #555; }
.page-content img { border-radius: 6px; margin: 15px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.page-content .content-image { text-align: left; margin: 20px 0; }
.page-content .content-image img { max-width: 75%; cursor: pointer; transition: transform 0.2s; }
.page-content .content-image img:hover { transform: scale(1.02); }
.image-grid .content-image img { max-width: 100%; }

.lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; justify-content: center; align-items: center; cursor: zoom-out; }
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 6px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }

.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0; }
.image-grid .content-image { margin: 0; }
.image-grid .content-image img { max-width: 100%; height: auto; object-fit: contain; }
@media (max-width: 767px) { .image-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .image-grid { grid-template-columns: 1fr; } }

.image-carousel { position: relative; overflow: hidden; margin: 20px 0; border-radius: 6px; }
.image-carousel .carousel-track { display: flex; transition: transform 0.5s ease; }
.image-carousel .carousel-slide { min-width: 33.333%; box-sizing: border-box; padding: 0 8px; }
.image-carousel .carousel-slide img { width: 100%; height: auto; border-radius: 6px; }
.image-carousel .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; }
.image-carousel .carousel-btn:hover { background: rgba(0,0,0,0.7); }
.image-carousel .carousel-btn.prev { left: 10px; }
.image-carousel .carousel-btn.next { right: 10px; }
.image-carousel .carousel-dots { text-align: center; padding: 10px 0; }
.image-carousel .carousel-dots span { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ccc; border-radius: 50%; cursor: pointer; }
.image-carousel .carousel-dots span.active { background: #0257ea; }
@media (max-width: 767px) { .image-carousel .carousel-slide { min-width: 50%; } }
@media (max-width: 480px) { .image-carousel .carousel-slide { min-width: 100%; } }
.page-content a { color: #0257ea; }
.page-content a:hover { text-decoration: underline; }

.page-tags { margin-top: 30px; padding-top: 15px; border-top: 1px solid #f0f0f0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page-tags-label { font-size: 13px; color: #999; }
.page-tags a { display: inline-block; padding: 2px 10px; background: #f5f5f5; color: #666; font-size: 12px; border-radius: 3px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.page-tags a:hover { background: #0257ea; color: #fff; text-decoration: none; }

/* Feature grid for product pages */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0; }
.feature-card { background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 3px solid #0257ea; }
.feature-card h4 { font-size: 16px; color: #222; margin-bottom: 10px; }
.feature-card ul { padding-left: 18px; }
.feature-card li { font-size: 13px; color: #666; margin-bottom: 5px; }

/* Specs table */
.specs-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.specs-table th, .specs-table td { padding: 10px 15px; border: 1px solid #ddd; text-align: left; font-size: 14px; }
.specs-table th { background: #f8f9fa; color: #333; font-weight: 600; width: 200px; }
.specs-table td { color: #555; }

/* Download table */
.download-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.download-table th { background: #0257ea; color: #fff; padding: 12px 15px; text-align: left; font-size: 14px; }
.download-table td { padding: 12px 15px; border-bottom: 1px solid #eee; font-size: 14px; color: #555; }
.download-table tr:hover { background: #f8f9fa; }
.download-table a { color: #0257ea; }
.download-table a:hover { text-decoration: underline; }

/* Category list page */
.category-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.category-item { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.category-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.category-item img { width: 100%; height: 180px; object-fit: cover; }
.category-item-info { padding: 20px; }
.category-item-info h3 { font-size: 17px; margin-bottom: 8px; }
.category-item-info h3 a { color: #222; }
.category-item-info h3 a:hover { color: #0257ea; }
.category-item-info p { font-size: 13px; color: #777; line-height: 1.7; }
.category-item-info .read-more { display: inline-block; margin-top: 10px; color: #0257ea; font-size: 13px; }
.category-item-info .read-more:hover { text-decoration: underline; }

.news-list { display: flex; flex-direction: column; gap: 0; }
.news-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid #f0f0f0; }
.news-item:last-child { border-bottom: none; }
.news-item img { width: 100px; height: 68px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.news-item-info { flex: 1; min-width: 0; }
.news-item-info h3 { font-size: 15px; margin: 0 0 4px; line-height: 1.5; }
.news-item-info h3 a { color: #222; text-decoration: none; }
.news-item-info h3 a:hover { color: #0257ea; }
.news-item-info .news-date { font-size: 12px; color: #999; margin-bottom: 4px; }
.news-item-info .news-desc { font-size: 13px; color: #777; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .news-item img { width: 80px; height: 54px; } .news-item-info h3 { font-size: 14px; } }

/* Contact section */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.contact-info-box { background: #f8f9fa; padding: 30px; border-radius: 8px; }
.contact-info-box h3 { font-size: 18px; margin-bottom: 20px; color: #222; }
.contact-info-box p { margin-bottom: 10px; color: #555; }
.contact-info-box strong { color: #333; }
.contact-qrcodes { display: flex; gap: 20px; margin-top: 20px; }
.contact-qrcodes img { width: 120px; height: 120px; border-radius: 4px; box-shadow: none; }

/* Image gallery */
.image-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px 0; }
.image-gallery img { width: 100%; border-radius: 6px; cursor: pointer; transition: transform 0.3s; }
.image-gallery img:hover { transform: scale(1.02); }

/* Footer */
.footer-sidebar { background: #1a1a2e; color: #ccc; padding: 50px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 30px; }
.footer-sidebar h3 { color: #fff; font-size: 16px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #0257ea; display: inline-block; }
.footer-sidebar ul { list-style: none; }
.footer-sidebar ul li { margin-bottom: 10px; }
.footer-sidebar ul li a { color: #aaa; font-size: 13px; transition: color 0.3s; }
.footer-sidebar ul li a:hover { color: #fff; }
.footer-sidebar .search-form { display: flex; gap: 5px; }
.footer-sidebar .search-form input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #444; background: #16213e; color: #fff; border-radius: 4px; outline: none; }
.footer-sidebar .search-form input[type="submit"] { padding: 8px 18px; background: #0257ea; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { display: inline-block; padding: 4px 10px; background: #16213e; color: #aaa; font-size: 12px; border-radius: 3px; transition: background 0.3s, color 0.3s; }
.tagcloud a:hover { background: #0257ea; color: #fff; }
.tagcloud .tag-more { display: inline-block; padding: 4px 10px; background: #16213e; color: #0257ea; font-size: 12px; border-radius: 3px; transition: background 0.3s, color 0.3s; }
.tagcloud .tag-more:hover { background: #0257ea; color: #fff; }
.footer-sidebar .contact-info { font-size: 13px; line-height: 2; }
.footer-sidebar .contact-info a { color: #aaa; }
.footer-sidebar .contact-info a:hover { color: #fff; }
.footer-sidebar .contact-qrcodes { display: flex; gap: 15px; margin-top: 15px; }
.footer-sidebar .contact-qrcodes img { width: 100px; height: 100px; border-radius: 4px; box-shadow: none; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #2a2a4a; font-size: 12px; color: #777; }

.mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; }
.mobile-menu-overlay.active { display: block; }

/* Responsive */
@media (max-width: 991px) {
    .navbar-toggle { display: block; z-index: 1002; }
    .nav-menu { display: none; position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: #fff; flex-direction: column; padding: 60px 0 20px; box-shadow: -2px 0 10px rgba(0,0,0,0.2); overflow-y: auto; transition: right 0.3s; z-index: 999; }
    .nav-menu.active { display: flex; right: 0; }
    .nav-menu > li > a { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
    .dropdown-menu { display: none; position: static; box-shadow: none; min-width: 100%; background: #f9f9f9; }
    .dropdown-menu li a { padding-left: 35px; }
    .dropdown-submenu > .dropdown-menu { left: 0; top: 0; }
    .dropdown-menu .dropdown-menu li a { padding-left: 50px; }
    .nav-menu > li.dropdown-open > .dropdown-menu { display: block; }
    .dropdown-submenu.dropdown-open > .dropdown-menu { display: block; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .slide-caption h2 { font-size: 30px; }
    .slide-caption p { font-size: 15px; }
    .feature-grid { grid-template-columns: 1fr; }
    .category-list { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .image-gallery { grid-template-columns: 1fr; }
    .specs-table th { width: 120px; }
}
@media (max-width: 576px) {
    .service-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .slider { height: 50vh; min-height: 300px; }
    .slide-caption h2 { font-size: 24px; }
    .slide-caption p { font-size: 14px; }
    .section-title h1 { font-size: 22px; }
    .header-title h2 { font-size: 17px; }
    .page-header h1 { font-size: 24px; }
    .page-content h2 { font-size: 20px; }
    .specs-table, .specs-table th, .specs-table td { display: block; }
    .specs-table th { width: 100%; }
    .specs-table td { border: none; padding-top: 0; }
}