@charset "utf-8";
/* ========================================
   大连铸钭合机械制造有限公司 - 全站样式
   配色：主色 #1d60ad | 强调色 #2fc16e
   ======================================== */

/* ── 1. Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:14px/1.5 'Microsoft YaHei',Tahoma,sans-serif;color:#333;background:#fff}
h1,h2,h3,h4,h5,h6{font-weight:normal;overflow:visible}
ul,ol,li{list-style:none}
a{text-decoration:none;color:inherit;-webkit-transition:all .4s;transition:all .4s}
img{max-width:100%;height:auto;vertical-align:middle;border:0}
input,textarea,select,button{font-size:100%;border:none;outline:none;-webkit-appearance:none;appearance:none}
button{background:none;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
::-webkit-scrollbar{width:8px;height:8px;background:#f5f5f5}
::-webkit-scrollbar-track{border-radius:10px;background:#e2e2e2}
::-webkit-scrollbar-thumb{border-radius:10px;background:#555}

/* ── 2. Utility Classes ── */
.container{max-width:1600px;margin:0 auto;width:100%}
.container-sm{max-width:1200px;margin:0 auto;width:100%}
.clearfix::after{content:'';display:table;clear:both}
.line-clamp-1{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.line-clamp-2{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.line-clamp-3{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-fallback{background:linear-gradient(135deg,#1d60ad,#2fc16e);display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:200px;color:#fff;font-size:14px;border-radius:8px}

/* ── 3. Animations ── */
.fade-in{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
@keyframes bannerWordsDown{0%{transform:translateY(-60px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes bannerWordsUp{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ── 4. Site Header & Navigation ── */
.site-header{width:100%;background:#1d60ad;position:fixed;left:0;top:0;z-index:1000;transition:all .4s ease-in-out}
.header-container{width:92%;max-width:1600px;height:80px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo a{display:flex;align-items:center;text-decoration:none}
.logo-icon{width:42px;height:42px;fill:#2fc16e;margin-right:10px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column}
.logo-brand{font-size:20px;color:#fff;font-weight:bold;line-height:1.2;white-space:nowrap}
.logo-slogan{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:2px;white-space:nowrap}
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;margin:0;padding:0}
.nav-item{position:relative;margin:0 18px}
.nav-link{display:block;height:80px;line-height:80px;font-size:16px;color:#fff;padding:0 4px;position:relative;transition:all .4s}
.nav-link:hover,.nav-link.active{color:#57ff7e}
.nav-item.active .nav-link{color:#57ff7e;border-bottom:3px solid #57ff7e}
.nav-link::before{content:'';position:absolute;left:50%;bottom:0;border:10px solid transparent;border-bottom-color:#fff;opacity:0;transform:translateX(-50%);transition:all .4s;pointer-events:none}
.nav-item:hover .nav-link::before{opacity:1}
.nav-dropdown{display:none;position:absolute;left:50%;transform:translateX(-50%);top:80px;min-width:160px;background:rgba(8,71,148,.85);backdrop-filter:blur(5px);padding:10px 0;z-index:99;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:0 0 4px 4px}
.nav-item:hover .nav-dropdown{display:block}
.nav-dropdown-item{display:block;padding:0 24px;height:38px;line-height:38px;font-size:14px;color:#fff;white-space:nowrap;transition:all .3s}
.nav-dropdown-item:hover{color:#57ff7e;background:rgba(255,255,255,.08)}
.nav-phone{display:flex;align-items:center;font-size:20px;color:#fff;flex-shrink:0}
.nav-phone-icon{width:24px;height:24px;margin-right:8px;fill:#57ff7e}
.nav-phone strong{color:#57ff7e}
.mobile-toggle{display:none;width:30px;height:80px;cursor:pointer;flex-shrink:0;position:relative}
.mobile-toggle span{display:block;width:30px;height:2px;background:#fff;position:absolute;left:0;top:50%;transition:all .3s}
.mobile-toggle span::before,.mobile-toggle span::after{content:'';position:absolute;width:30px;height:2px;background:#fff;left:0;transition:all .3s}
.mobile-toggle span::before{top:-8px}
.mobile-toggle span::after{top:8px}
.mobile-toggle.active span{background:transparent}
.mobile-toggle.active span::before{top:0;transform:rotate(45deg)}
.mobile-toggle.active span::after{top:0;transform:rotate(-45deg)}

/* ── 5. Banner Carousel ── */
.hero-banner{width:100%;position:relative;overflow:hidden;margin-top:0}
.banner-slides{width:100%;position:relative}
.banner-slide{width:100%;position:relative;display:none}
.banner-slide.active{display:block}
.banner-image{width:100%;height:auto;overflow:hidden;position:relative}
.banner-image img{width:100%;height:100%;object-fit:cover;min-height:500px;transition:transform 5s ease}
.banner-slide.active .banner-image img{transform:scale(1.02)}
.banner-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.35)}
.banner-content{position:absolute;left:0;top:45%;transform:translateY(-50%);width:100%;text-align:center;z-index:2}
.banner-title{font-size:44px;color:#fff;font-weight:bold;font-family:'Microsoft YaHei',sans-serif}
.banner-subtitle{font-size:18px;color:#fff;margin-top:20px}
.banner-subtitle span{border:1px solid #fff;padding:6px 35px;border-radius:30px;margin:0 10px;display:inline-block}
.banner-slide.active .banner-title{animation:bannerWordsDown 1.2s ease both .6s}
.banner-slide.active .banner-subtitle{animation:bannerWordsUp 1.2s ease both .9s}
.banner-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:16px;z-index:3}
.banner-dot{width:6px;height:6px;border-radius:50%;background:#2fc16e;opacity:.8;cursor:pointer;position:relative;transition:all .5s}
.banner-dot::after{content:'';width:20px;height:20px;border:2px solid #2fc16e;border-radius:50%;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;opacity:0;transform:scale(0);transition:all .5s}
.banner-dot.active{opacity:1}
.banner-dot.active::after{opacity:1;transform:scale(1)}
.banner-arrow{position:absolute;top:50%;width:40px;height:60px;margin-top:-30px;cursor:pointer;z-index:4;transition:all .3s}
.banner-arrow-prev{left:15px;background:rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center center/24px}
.banner-arrow-next{right:15px;background:rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") no-repeat center center/24px}
.banner-arrow:hover{background-color:rgba(0,129,204,1)}

/* ── 6. Product Icons Section ── */
.section-products{width:100%;padding:80px 0 50px;background:#fff}
.section-products .container{width:92%;max-width:1600px;margin:0 auto}
.section-title{text-align:center;margin-bottom:20px}
.section-title h2{font-size:36px;color:#111;font-weight:bold}
.section-title p{font-size:16px;color:#888;margin-top:16px}
.product-icons{display:flex;justify-content:center;gap:40px;margin:30px 0 46px;flex-wrap:wrap}
.product-icon-item{text-align:center;cursor:pointer;transition:all .4s}
.product-icon-item:hover{transform:translateY(-4px)}
.product-icon-img{width:64px;height:64px;margin:0 auto 10px}
.product-icon-img svg{width:100%;height:100%}
.product-icon-name{font-size:16px;color:#444;font-weight:bold;transition:color .4s}
.product-icon-item:hover .product-icon-name{color:#1d60ad}

/* ── 7. Product Tabs & Grid ── */
.product-tabs{display:flex;justify-content:center;gap:20px;margin-bottom:40px}
.product-tab{padding:8px 24px;font-size:16px;color:#888;cursor:pointer;border-bottom:2px solid transparent;transition:all .4s}
.product-tab:hover,.product-tab.active{color:#1d60ad;border-bottom-color:#1d60ad}
.product-grid{width:100%;display:flex;flex-wrap:wrap;margin:-1.5% 0 0 -1.5%}
.product-card{width:31.333%;margin:1.5% 0 0 1.5%;background:#f5f5f5;border-radius:5px;overflow:hidden;transition:all .4s ease-out;position:relative}
.product-card-image{width:100%;padding-top:75%;position:relative;overflow:hidden}
.product-card-image img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-card-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(30,112,196,.8);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;opacity:0;transform:scale(.9);transition:all .6s ease;z-index:2;padding:20px}
.product-card-overlay h3{font-size:18px;font-weight:bold;margin-bottom:8px}
.product-card-overlay p{font-size:14px;opacity:.9}
.product-card:hover .product-card-overlay{opacity:1;transform:scale(1)}
.product-card:hover .product-card-image img{transform:scale(1.1)}
.product-card-text{padding:0 5px}
.product-card-title{line-height:50px;font-size:16px;color:#444;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .4s}
.product-card:hover .product-card-title{color:#fff}
.product-card:hover{background:#2fc16e}
.btn-more{display:block;width:140px;background:#2fc16e;border-radius:30px;height:44px;line-height:44px;color:#fff;font-size:14px;margin:30px auto 0;text-align:center;transition:background .4s}
.btn-more:hover{background:#5abbda}

/* ── 8. About Section ── */
.section-about{width:100%;padding:80px 0;background-size:cover;background-position:center;position:relative}
.section-about::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(29,96,173,.92)}
.section-about .container{position:relative;z-index:1}
.section-about .section-title h2{color:#fff}
.section-about .section-title p{color:rgba(255,255,255,.8)}
.about-content{display:flex;gap:40px;margin-top:40px;align-items:flex-start}
.about-text{flex:1;min-width:0}
.about-description{font-size:16px;color:rgba(255,255,255,.85);line-height:2;text-align:center}
.about-stats{display:flex;gap:0;margin-top:30px}
.stat-item{flex:1;text-align:center;border-right:1px dashed rgba(255,255,255,.3);padding:10px 0}
.stat-item:last-child{border-right:none}
.stat-number{font-size:50px;color:#fff;font-family:Impact,'Arial Narrow',sans-serif;font-weight:bold}
.stat-label{font-size:16px;color:#fff;margin-top:4px}
.about-video{width:400px;flex-shrink:0;position:relative}
.about-video-img{width:100%;border-radius:8px;overflow:hidden}
.about-video-img img{width:100%;height:auto;display:block}
.video-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(47,193,110,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.video-play-btn:hover{transform:translate(-50%,-50%) scale(1.1);background:rgba(47,193,110,1)}
.video-play-btn svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.video-label{font-size:14px;color:#fff;text-align:center;margin-top:10px}

/* ── 9. Cases/Partners Section ── */
.section-cases{width:100%;padding:80px 0 50px;background:#f5f5f5}
.section-cases .container{width:92%;max-width:1600px;margin:0 auto}
.cases-grid{display:flex;flex-wrap:wrap;margin:-1% 0 0 -2%}
.case-card{width:23%;margin:1% 0 0 2%;background:#fff;border-radius:3px;overflow:hidden;padding:15px;transition:all .4s}
.case-card.featured{width:48%}
.case-card-image{width:100%;padding-top:75%;position:relative;overflow:hidden}
.case-card-image img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.case-card:hover .case-card-image img{transform:scale(1.1)}
.case-card-text{padding:15px 0 5px}
.case-card-title{font-size:16px;color:#444;line-height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .4s}
.case-card:hover .case-card-title{color:#2fc16e}

/* ── 10. News Section ── */
.section-news{width:100%;padding:80px 0}
.section-news .container{width:92%;max-width:1600px;margin:0 auto}
.news-tabs{display:flex;justify-content:center;gap:20px;margin:20px 0 0}
.news-tab{font-size:16px;color:#888;cursor:pointer;transition:color .4s;padding:0 20px}
.news-tab:hover,.news-tab.active{color:#2fc16e}
.news-content{margin-top:50px}
.news-content-panel{display:none}
.news-content-panel.active{display:block;animation:fadeInUp .5s ease}
.news-featured{display:flex;gap:20px}
.news-featured-image{width:50%;overflow:hidden;position:relative}
.news-featured-image img{width:100%;height:456px;object-fit:cover;transition:transform .4s}
.news-featured:hover .news-featured-image img{transform:scale(1.1)}
.news-featured-text{width:50%;background:#f5f5f5;padding:30px;position:relative}
.news-featured-title{font-size:18px;color:#444;line-height:30px;padding-right:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .4s}
.news-featured:hover .news-featured-title{color:#2fc16e}
.news-featured-desc{font-size:14px;color:#999;line-height:30px;height:90px;padding-right:100px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin-top:10px}
.news-date-badge{width:90px;height:90px;background:#2fc16e;padding:8px;text-align:center;position:absolute;right:30px;top:30px;color:#fff}
.news-date-day{font-size:38px;font-family:Impact,sans-serif;display:block}
.news-date-month{font-size:12px;display:block}
.news-list-side{width:50%;padding-left:10px}
.news-list-item{display:flex;background:#f5f5f5;margin-bottom:3px;padding:20px 24px;transition:all .4s}
.news-list-text{width:66%;padding-right:30px}
.news-list-title{font-size:18px;color:#444;line-height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .4s}
.news-list-item:hover .news-list-title{color:#2fc16e}
.news-list-desc{font-size:14px;color:#888;line-height:24px;height:48px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:8px 0}
.news-list-date{font-size:14px;color:#555;font-family:Arial,sans-serif}
.news-list-thumb{width:34%;overflow:hidden;height:146px}
.news-list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news-list-item:hover .news-list-thumb img{transform:scale(1.1)}

/* ── 11. Footer ── */
.site-footer{width:100%;background:#282d30}
.footer-top{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-top .container{width:92%;max-width:1600px;margin:0 auto}
.footer-nav{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.footer-nav-link{font-size:14px;color:#9c9e9f;transition:color .4s}
.footer-nav-link:hover{color:#fff}
.footer-main{background:#323639;padding:40px 0}
.footer-main .container{width:92%;max-width:1600px;margin:0 auto;display:flex;gap:40px}
.footer-column{flex:1;min-width:0}
.footer-heading{font-size:18px;color:#fff;font-weight:bold;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15)}
.footer-text{font-size:14px;color:#9c9e9f;line-height:2}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-link{font-size:14px;color:#9c9e9f;transition:color .4s}
.footer-link:hover{color:#2fc16e}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.footer-contact-icon{width:18px;height:18px;flex-shrink:0;margin-top:3px;fill:#2fc16e}
.footer-contact-text{font-size:14px;color:#9c9e9f;line-height:1.8}
.footer-bottom{background:#282d30;padding:20px 0;text-align:center}
.footer-bottom .container{width:92%;max-width:1600px;margin:0 auto}
.footer-copyright{font-size:13px;color:#9c9e9f;line-height:2}
.footer-copyright a{color:#9c9e9f;transition:color .4s}
.footer-copyright a:hover{color:#2fc16e}
.footer-icp{margin-left:8px}
.footer-icp a{color:#9c9e9f}
.footer-icp a:hover{color:#2fc16e}

/* ── 12. Inner Page Banner ── */
.page-banner{width:100%;position:relative;overflow:hidden;margin-top:80px}
.page-banner-image{width:100%;height:auto;overflow:hidden;position:relative}
.page-banner-image img{width:100%;min-height:300px;object-fit:cover}
.page-banner-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4)}
.page-banner-content{position:absolute;left:0;top:45%;transform:translateY(-50%);width:100%;text-align:center;z-index:2}
.page-banner-title{font-size:45px;color:#fff;font-family:Impact,'Arial Narrow',sans-serif;animation:bannerWordsDown 1s ease both .4s}

/* ── 13. Breadcrumb ── */
.breadcrumb{width:100%;background:rgba(0,0,0,.5);padding:0}
.breadcrumb .container{width:92%;max-width:1600px;margin:0 auto;height:70px;display:flex;align-items:center;justify-content:space-between}
.breadcrumb-list{display:flex;align-items:center;gap:6px}
.breadcrumb-item{font-size:16px;color:#fff}
.breadcrumb-link{font-size:16px;color:#fff;transition:color .4s}
.breadcrumb-link:hover{color:#57ff7e}
.breadcrumb-separator{font-size:14px;color:rgba(255,255,255,.5)}
.breadcrumb-current{font-size:16px;color:#57ff7e}

/* ── 14. Product List Page ── */
.product-list-section{width:100%;padding:60px 0 80px}
.product-list-section .container{width:92%;max-width:1600px;margin:0 auto}
.product-list-grid{display:flex;flex-wrap:wrap;margin:-1.5% 0 0 -1.5%}
.product-list-card{width:23%;margin:1.5% 0 0 1.5%;background:#f5f5f5;border-radius:5px;overflow:hidden;transition:all .4s;position:relative}
.product-list-card:hover{background:#2fc16e}
.product-list-card:hover .product-card-title{color:#fff}

/* ── 15. Product Detail Page ── */
.product-detail{width:100%;padding:60px 0 80px}
.product-detail .container{width:92%;max-width:1200px;margin:0 auto}
.product-detail-top{display:flex;gap:40px;margin-bottom:40px}
.product-detail-image{width:50%;border-radius:8px;overflow:hidden}
.product-detail-image img{width:100%;height:auto;object-fit:cover}
.product-detail-info{flex:1}
.product-detail-title{font-size:28px;color:#111;font-weight:bold;margin-bottom:15px}
.product-detail-desc{font-size:15px;color:#666;line-height:2;margin-bottom:20px}
.product-params{width:100%;margin-bottom:40px}
.product-params h3{font-size:22px;color:#111;font-weight:bold;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #2fc16e;display:inline-block}
.params-table{width:100%;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}
.params-row{display:flex;border-bottom:1px solid #e0e0e0}
.params-row:last-child{border-bottom:none}
.params-label{width:25%;padding:12px 16px;background:#f5f5f5;font-size:14px;color:#333;font-weight:bold}
.params-value{width:75%;padding:12px 16px;font-size:14px;color:#666}
.product-features{margin-bottom:40px}
.product-features h3{font-size:22px;color:#111;font-weight:bold;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #2fc16e;display:inline-block}
.feature-list{display:flex;flex-direction:column;gap:12px}
.feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:#f5f5f5;border-radius:4px}
.feature-icon{width:24px;height:24px;flex-shrink:0;fill:#2fc16e;margin-top:2px}
.feature-text{font-size:15px;color:#555;line-height:1.6}
.related-products{margin-top:60px}
.related-products h3{font-size:22px;color:#111;font-weight:bold;margin-bottom:20px;text-align:center}
.related-grid{display:flex;flex-wrap:wrap;margin:-1% 0 0 -1.5%}
.related-card{width:23.5%;margin:1% 0 0 1.5%;background:#f5f5f5;border-radius:5px;overflow:hidden;transition:all .4s}
.related-card:hover{background:#2fc16e}
.related-card:hover .product-card-title{color:#fff}
.related-card-image{width:100%;padding-top:75%;position:relative;overflow:hidden}
.related-card-image img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.related-card:hover .related-card-image img{transform:scale(1.1)}

/* ── 16. News List Page ── */
.news-list-section{width:100%;padding:60px 0 80px}
.news-list-section .container{width:92%;max-width:1200px;margin:0 auto}
.news-list-full{display:flex;flex-direction:column;gap:16px}
.news-list-full-item{display:flex;background:#f5f5f5;border-radius:4px;overflow:hidden;transition:all .4s}
.news-list-full-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.news-list-full-thumb{width:280px;flex-shrink:0;overflow:hidden}
.news-list-full-thumb img{width:100%;height:100%;object-fit:cover;min-height:180px;transition:transform .4s}
.news-list-full-item:hover .news-list-full-thumb img{transform:scale(1.05)}
.news-list-full-content{flex:1;padding:24px 30px;display:flex;flex-direction:column;justify-content:center}
.news-list-full-title{font-size:20px;color:#333;font-weight:bold;margin-bottom:8px;transition:color .4s}
.news-list-full-item:hover .news-list-full-title{color:#1d60ad}
.news-list-full-date{font-size:13px;color:#999;margin-bottom:10px}
.news-list-full-desc{font-size:14px;color:#666;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}

/* ── 17. News Detail Page ── */
.news-detail{width:100%;padding:60px 0 80px}
.news-detail .container{width:92%;max-width:1000px;margin:0 auto}
.news-detail-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #e0e0e0}
.news-detail-title{font-size:28px;color:#111;font-weight:bold;line-height:1.4;margin-bottom:10px}
.news-detail-meta{font-size:14px;color:#999}
.news-detail-body{font-size:15px;color:#555;line-height:2}
.news-detail-body p{margin-bottom:18px;text-indent:2em}
.news-detail-body img{display:block;margin:20px auto;border-radius:6px;max-width:100%}
.news-detail-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid #e0e0e0}
.news-nav-link{font-size:14px;color:#666;max-width:45%;transition:color .4s}
.news-nav-link:hover{color:#1d60ad}

/* ── 18. About Page ── */
.about-page-section{width:100%;padding:60px 0 80px}
.about-page-section .container{width:92%;max-width:1200px;margin:0 auto}
.about-intro{margin-bottom:60px}
.about-intro-text{font-size:15px;color:#555;line-height:2;text-indent:2em;margin-bottom:16px}
.timeline-section{margin-bottom:60px}
.timeline-section h3{font-size:24px;color:#111;font-weight:bold;text-align:center;margin-bottom:40px}
.timeline{position:relative;padding:20px 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#1d60ad;transform:translateX(-50%)}
.timeline-item{display:flex;justify-content:flex-end;padding:0 0 40px;position:relative;width:50%}
.timeline-item:nth-child(even){margin-left:50%;justify-content:flex-start}
.timeline-item::after{content:'';position:absolute;width:16px;height:16px;background:#2fc16e;border:3px solid #fff;border-radius:50%;top:6px;right:-8px;box-shadow:0 0 0 3px #1d60ad}
.timeline-item:nth-child(even)::after{left:-8px;right:auto}
.timeline-content{background:#f5f5f5;padding:20px 24px;border-radius:8px;max-width:90%;margin-right:30px}
.timeline-item:nth-child(even) .timeline-content{margin-left:30px;margin-right:0}
.timeline-year{font-size:24px;color:#1d60ad;font-weight:bold;font-family:Impact,sans-serif;margin-bottom:6px}
.timeline-text{font-size:14px;color:#666;line-height:1.8}
.culture-section{margin-bottom:60px}
.culture-section h3{font-size:24px;color:#111;font-weight:bold;text-align:center;margin-bottom:40px}
.culture-grid{display:flex;gap:24px;justify-content:center}
.culture-card{flex:1;max-width:360px;background:#f5f5f5;border-radius:8px;padding:30px 24px;text-align:center;transition:all .4s}
.culture-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(29,96,173,.15)}
.culture-icon{width:48px;height:48px;margin:0 auto 16px;fill:#1d60ad}
.culture-title{font-size:20px;color:#111;font-weight:bold;margin-bottom:10px}
.culture-desc{font-size:14px;color:#666;line-height:1.8}
.team-section h3{font-size:24px;color:#111;font-weight:bold;text-align:center;margin-bottom:40px}
.team-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.team-card{width:calc(33.333% - 16px);text-align:center;background:#f5f5f5;border-radius:8px;padding:30px 20px;transition:all .4s}
.team-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(29,96,173,.15)}
.team-avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:3px solid #2fc16e}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-name{font-size:18px;color:#111;font-weight:bold;margin-bottom:4px}
.team-position{font-size:14px;color:#888}

/* ── 19. Contact Page ── */
.contact-section{width:100%;padding:60px 0 80px}
.contact-section .container{width:92%;max-width:1200px;margin:0 auto}
.contact-info{display:flex;gap:24px;margin-bottom:50px;flex-wrap:wrap}
.contact-info-item{flex:1;min-width:250px;background:#f5f5f5;border-radius:8px;padding:30px;display:flex;align-items:flex-start;gap:16px;transition:all .4s}
.contact-info-item:hover{box-shadow:0 4px 16px rgba(29,96,173,.1)}
.contact-info-icon{width:40px;height:40px;flex-shrink:0;fill:#1d60ad}
.contact-info-text{font-size:14px;color:#666;line-height:1.8}
.contact-info-label{font-size:16px;color:#111;font-weight:bold;margin-bottom:4px}
.contact-form{max-width:700px;margin:0 auto}
.contact-form h3{font-size:22px;color:#111;font-weight:bold;margin-bottom:30px;text-align:center}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:14px;color:#555;margin-bottom:8px;font-weight:bold}
.form-input{width:100%;height:46px;border:1px solid #ddd;border-radius:4px;padding:0 16px;font-size:14px;color:#333;transition:border-color .3s;background:#fff}
.form-input:focus{border-color:#1d60ad}
.form-textarea{width:100%;height:140px;border:1px solid #ddd;border-radius:4px;padding:12px 16px;font-size:14px;color:#333;resize:none;transition:border-color .3s;background:#fff}
.form-textarea:focus{border-color:#1d60ad}
.form-submit{display:block;width:160px;height:46px;background:#2fc16e;color:#fff;font-size:16px;border-radius:30px;margin:20px auto 0;cursor:pointer;transition:background .4s;border:none}
.form-submit:hover{background:#5abbda}

/* ── 20. Back to Top ── */
.back-to-top{position:fixed;right:20px;bottom:15%;width:44px;height:44px;background:rgba(176,176,176,.8);border-radius:4px;cursor:pointer;z-index:999;display:none;transition:all .5s}
.back-to-top:hover{background:#2fc16e}
.back-to-top svg{width:20px;height:20px;fill:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ── 21. Side Toolbar ── */
.side-toolbar{position:fixed;top:50%;right:1%;margin-top:-160px;z-index:100;width:60px;transition:all .5s}
.toolbar-item{position:relative;width:60px;height:60px;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);border-radius:5px;color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer;transition:all .5s;margin-top:2px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.toolbar-item:first-child{margin-top:0}
.toolbar-item:hover{background:#2fc16e}
.toolbar-item svg{width:22px;height:22px;fill:#fff;margin-bottom:2px}
.toolbar-popup{position:absolute;top:0;right:70px;width:180px;background:#2fc16e;border-radius:5px;padding:12px;opacity:0;pointer-events:none;transition:all .5s}
.toolbar-popup::after{content:'';position:absolute;right:-8px;top:50%;margin-top:-6px;border:8px solid transparent;border-left-color:#2fc16e}
.toolbar-item:hover .toolbar-popup{opacity:1;right:65px;pointer-events:auto}
.toolbar-popup p{font-size:12px;color:#fff;text-align:center;margin-bottom:4px}
.toolbar-popup strong{font-size:16px;color:#fff;display:block;text-align:center}

/* ── 22. Mobile Quick Links ── */
.mobile-quick-links{position:fixed;bottom:-70px;width:100%;height:60px;z-index:1000;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);transition:all .5s;display:flex}
.mobile-quick-links a{flex:1;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px}
.mobile-quick-links a svg{width:20px;height:20px;fill:#fff;margin-bottom:4px}

/* ── 23. Responsive - Tablet (max-width: 1000px) ── */
@media screen and (max-width:1000px){
  .header-container{height:60px}
  .logo-brand{font-size:16px}
  .logo-slogan{font-size:10px}
  .logo-icon{width:34px;height:34px}
  .main-nav{display:none;position:fixed;top:60px;left:0;width:100%;background:rgba(27,28,28,.85);backdrop-filter:blur(5px);box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:999;padding:0}
  .main-nav.open{display:block}
  .nav-list{flex-direction:column}
  .nav-item{margin:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-link{height:44px;line-height:44px;font-size:16px;padding:0 3%}
  .nav-item.active .nav-link{border-bottom:none}
  .nav-link::before{display:none}
  .nav-dropdown{display:none;position:static;transform:none;min-width:auto;background:rgba(255,255,255,.08);padding:0 3%;box-shadow:none;border-radius:0}
  .nav-item:hover .nav-dropdown{display:none}
  .nav-item.dropdown-open .nav-dropdown{display:block}
  .nav-dropdown-item{padding:0 3%;height:38px;line-height:38px;font-size:14px}
  .nav-phone{display:none}
  .mobile-toggle{display:block;height:60px}
  .banner-title{font-size:24px}
  .banner-subtitle{font-size:12px;margin-top:10px}
  .banner-subtitle span{padding:4px 12px;margin:4px}
  .banner-arrow{display:none}
  .banner-image img{min-height:320px}
  .section-products{padding:40px 0 30px}
  .product-icons{gap:20px;margin:20px 0 30px}
  .product-tabs{gap:10px}
  .product-tab{font-size:14px;padding:6px 16px}
  .product-card{width:48%}
  .section-about{padding:50px 0}
  .about-content{flex-direction:column}
  .about-video{width:100%}
  .about-stats{flex-wrap:wrap}
  .stat-item{width:50%;margin-bottom:16px}
  .section-cases{padding:50px 0 30px}
  .case-card{width:48%}
  .case-card.featured{width:98%}
  .section-news{padding:40px 0}
  .news-featured{flex-direction:column}
  .news-featured-image{width:100%}
  .news-featured-image img{height:auto}
  .news-featured-text{width:100%}
  .news-date-badge{width:60px;height:60px;font-size:20px;right:10px;top:10px;padding:4px}
  .news-date-day{font-size:24px}
  .news-list-side{width:100%;padding-left:0;margin-top:16px}
  .news-list-thumb{height:101px}
  .container-wrapper{margin-top:60px}
  .page-banner{margin-top:60px}
  .page-banner-image img{min-height:220px}
  .page-banner-title{font-size:38px}
  .product-detail-top{flex-direction:column}
  .product-detail-image{width:100%}
  .product-list-card{width:48%}
  .related-card{width:48%}
  .side-toolbar{right:-100px}
  .toolbar-item{width:50px;height:50px}
  .news-list-full-item{flex-direction:column}
  .news-list-full-thumb{width:100%;height:200px}
  .team-card{width:calc(50% - 12px)}
  .timeline::before{left:20px}
  .timeline-item{width:100%;padding-left:50px;justify-content:flex-start}
  .timeline-item:nth-child(even){margin-left:0}
  .timeline-item::after{left:12px;right:auto}
  .timeline-item:nth-child(even)::after{left:12px}
  .timeline-content{max-width:100%;margin:0}
  .timeline-item:nth-child(even) .timeline-content{margin:0}
}

/* ── 24. Responsive - Mobile (max-width: 640px) ── */
@media screen and (max-width:640px){
  .header-container{width:96%}
  .logo-icon{width:28px;height:28px;margin-right:8px}
  .logo-brand{font-size:14px}
  .logo-slogan{font-size:9px;letter-spacing:1px}
  .banner-image img{min-height:260px}
  .banner-title{font-size:18px}
  .banner-subtitle{font-size:11px;margin-top:6px}
  .banner-subtitle span{padding:3px 8px;margin:2px}
  .section-title h2{font-size:22px}
  .section-title p{font-size:13px;margin-top:10px}
  .product-icons{gap:12px;margin:16px 0 24px}
  .product-icon-img{width:40px;height:40px}
  .product-icon-name{font-size:13px}
  .product-card{width:100%}
  .stat-item{width:50%}
  .stat-number{font-size:36px}
  .stat-label{font-size:12px}
  .case-card{width:100%;margin-left:0}
  .case-card.featured{width:100%}
  .news-tabs{gap:10px}
  .news-tab{font-size:13px;padding:0 10px}
  .news-featured-text{padding:16px}
  .news-featured-title{font-size:16px;padding-right:70px}
  .news-list-item{padding:12px}
  .news-list-text{width:60%;padding-right:10px}
  .news-list-title{font-size:15px}
  .news-list-thumb{width:40%;height:90px}
  .product-list-card{width:100%}
  .related-card{width:100%}
  .footer-main .container{flex-direction:column;gap:24px}
  .page-banner-title{font-size:28px}
  .breadcrumb-list{flex-wrap:wrap}
  .breadcrumb-item{font-size:13px}
  .culture-grid{flex-direction:column;align-items:center}
  .culture-card{max-width:100%}
  .team-card{width:100%}
  .contact-info{flex-direction:column}
  .mobile-quick-links{bottom:0}
  .footer-bottom{padding-bottom:70px}
}