/* ===== Green Nature Theme v2 — page.css (radical redesign) ===== */

/* === INNER BANNER === */
.banner-inner{position:relative;overflow:hidden;height:340px;background:var(--homebg)}
.banner-img{position:absolute;inset:0}
.banner-img img{width:100%;height:100%;object-fit:cover;opacity:.35}
.banner-content{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.banner-title-h1{font-size:44px;font-weight:var(--fontblod7);color:#fff;letter-spacing:-1px}
.banner-breadcrumbs{margin-top:12px;font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.5px;text-transform:uppercase}
.banner-breadcrumbs a{color:rgba(255,255,255,.6);transition:color .2s}
.banner-breadcrumbs a:hover{color:var(--color-light)}

/* === COMMON LAYOUT === */
.common-main{padding:60px 0 80px;background:var(--bglight)}
.page-container{display:grid;grid-template-columns:1fr 300px;gap:48px}
.page-main{min-width:0}
/* === SIDEBAR === */
.sidebar{order:2}
.sidebar-item{margin-bottom:28px;background:#fff;border-radius:16px;overflow:hidden;padding:24px;border:1px solid rgba(45,143,92,.08)}
.sidebar-item:hover{border-color:rgba(45,143,92,.18)}
.sidebar-title{font-size:16px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:18px;padding-bottom:14px;position:relative;letter-spacing:-.3px}
.sidebar-title::after{content:"";position:absolute;bottom:0;left:0;width:36px;height:3px;background:var(--color);border-radius:2px}
.sidebar-search{display:flex;gap:0;border:1px solid #e0e0e0;border-radius:999px;overflow:hidden;transition:border-color .2s}
.sidebar-search:focus-within{border-color:var(--color)}
.sidebar-search input{flex:1;height:42px;padding:0 18px;border:none;font-size:14px;outline:none;background:transparent}
.sidebar-search .search-btn{width:46px;height:42px;background:var(--color);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;border:none;border-radius:0}
.sidebar-search .search-btn:hover{background:var(--color-dark)}
.sidebar-cate li{position:relative}
.sidebar-cate li a{display:block;padding:11px 16px 11px 0;font-size:14px;color:var(--summarycolor);transition:var(--transition);border-bottom:1px solid rgba(0,0,0,.04)}
.sidebar-cate li a:hover,.sidebar-cate li.active>a{color:var(--color);font-weight:var(--fontblod5);transform:translateX(4px)}
.sidebar-cate li em{position:absolute;right:0;top:12px;font-size:11px;color:var(--summarycolor);cursor:pointer;transition:transform .2s}
.sidebar-cate .sub-menu{padding-left:14px;border-left:2px solid var(--bgalt)}
.sidebar-cate .sub-menu li a{font-size:13px;padding:8px 0 8px 0}
.sidebar-cate .LiLevel2.active a{color:var(--color)}
/* sidebar inquiry form */
.sidebar-item.inquiry{background:var(--homebg);border:none;color:rgba(255,255,255,.8)}
.sidebar-item.inquiry .sidebar-title{color:#fff}
.sidebar-item.inquiry .sidebar-title::after{background:var(--color-light)}
.sidebar-item .send-inquiry{display:flex;flex-direction:column;gap:10px}
.sidebar-item .send-inquiry input,.sidebar-item .send-inquiry textarea{width:100%;padding:11px 14px;border:none;border-radius:8px;font-size:14px;outline:none;background:rgba(255,255,255,.1);color:#fff;font-family:inherit;transition:background .2s}
.sidebar-item .send-inquiry input::placeholder,.sidebar-item .send-inquiry textarea::placeholder{color:rgba(255,255,255,.45)}
.sidebar-item .send-inquiry input:focus,.sidebar-item .send-inquiry textarea:focus{background:rgba(255,255,255,.18)}
.sidebar-item .send-inquiry textarea{min-height:90px;resize:vertical}
.sidebar-item .send-btn{width:100%;padding:12px;background:var(--color);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:var(--fontblod6);cursor:pointer;transition:background .2s;margin-top:2px;letter-spacing:.5px}
.sidebar-item .send-btn:hover{background:var(--color-light)}

/* sidebar recent news */
.recentnews-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.recentnews-list li:last-child{border-bottom:none}
.recentnews-list li .img{width:72px;height:54px;flex-shrink:0;border-radius:8px;overflow:hidden}
.recentnews-list li .img img{width:100%;height:100%;object-fit:cover}
.recentnews-list li .info{flex:1;min-width:0}
.recentnews-list li .info .title{font-size:13px;color:var(--fontcolor);line-height:1.45;transition:color .2s}
.recentnews-list li .info .title:hover{color:var(--color)}
.recentnews-list li .info .date{font-size:11px;color:var(--summarycolor);margin-top:6px}
.recentnews-list li .info .date em{margin-right:4px}
/* sidebar related */
.related-list .related-item{display:flex;gap:12px;margin-bottom:14px}
.related-item .related-img{width:72px;height:54px;flex-shrink:0;border-radius:8px;overflow:hidden}
.related-item .related-img img{width:100%;height:100%;object-fit:cover}
.related-item .related-info{flex:1;min-width:0}
.related-item .related-title{font-size:13px;color:var(--fontcolor);transition:color .2s;line-height:1.4}
.related-item .related-info:hover .related-title{color:var(--color)}

/* === PRODUCT LIST === */
.pro-cate-title{font-size:28px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:6px;letter-spacing:-.5px}
.prolist-content{font-size:14px;color:var(--summarycolor);margin-bottom:28px;line-height:1.7}
.pro-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pro-list li{background:#fff;border-radius:16px;overflow:hidden;transition:var(--transition);border:1px solid rgba(0,0,0,.04)}
.pro-list li:hover{border-color:var(--color);box-shadow:0 20px 50px rgba(45,143,92,.1);transform:translateY(-4px)}
.pro-list li .pro-img{position:relative;overflow:hidden;background:#fff;padding:20px}
.pro-list li .pro-img .lazy-wrap::after{padding-bottom:70%}
.pro-list li .pro-img img{width:100%;height:100%;object-fit:contain;position:absolute;top:0;left:0;transition:transform .5s;padding:16px}
.pro-list li:hover .pro-img img{transform:scale(1.06)}
.pro-list li .pro-img .icon-hottitle{position:absolute;top:12px;left:12px;background:var(--color);color:#fff;font-size:11px;padding:3px 10px;border-radius:999px;font-style:normal;font-weight:var(--fontblod6);letter-spacing:.5px}
.pro-info{padding:0 20px 20px}
.pro-info .title{font-size:15px;font-weight:var(--fontblod6);color:var(--fontcolor);display:block;margin-bottom:6px;transition:color .2s;line-height:1.4}
.pro-info .title:hover{color:var(--color)}
.pro-info .text{font-size:13px;color:var(--summarycolor);line-height:1.6;margin-bottom:10px}
.pro-info .btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#fff;background:var(--color);padding:8px 18px;border-radius:999px;font-weight:var(--fontblod5);transition:var(--transition)}
.pro-info .btn:hover{background:var(--color-dark);gap:10px}
.pro-info .btn em{font-size:12px}

/* === PRODUCT DETAIL === */
.prodetails-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px;align-items:start}
.preview-container{position:sticky;top:130px}
.preview-box{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.06)}
.preview-box .swiper-slide{display:flex;align-items:center;justify-content:center;position:relative;padding:24px}
.preview-box .swiper-slide::after{content:"";display:block;padding-bottom:75%}
.preview-box .swiper-slide img{max-width:90%;max-height:90%;object-fit:contain;position:absolute}
.prodetails-button-next,.prodetails-button-prev{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(0,0,0,.06);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fontcolor);cursor:pointer;transition:var(--transition);z-index:2;font-size:14px}
.prodetails-button-next{right:10px}
.prodetails-button-prev{left:10px}
.prodetails-button-next:hover,.prodetails-button-prev:hover{background:var(--color);color:#fff}
.prodetails-pagination{text-align:center;margin-top:14px}
.prodetails-info{padding:8px 0}
.prodetails-name{font-size:30px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:18px;line-height:1.25;letter-spacing:-.5px}
.prodetails-text{font-size:15px;color:var(--summarycolor);line-height:1.85;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--bgalt)}
.prodetails-btnlist{margin-bottom:24px}
.prodetails-btnlist .pro-btn{display:inline-block;padding:16px 40px;background:var(--color);color:#fff;border-radius:999px;font-size:15px;font-weight:var(--fontblod6);cursor:pointer;transition:var(--transition);letter-spacing:.3px}
.prodetails-btnlist .pro-btn:hover{background:var(--color-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,143,92,.2)}
.share-btn-list{margin-bottom:24px}
.pagelink{display:flex;gap:16px;border-top:1px solid var(--bgalt);padding-top:24px;margin-top:24px}
.pagelink-item{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--summarycolor)}
.pagelink-item a{color:var(--fontcolor);transition:color .2s}
.pagelink-item a:hover{color:var(--color)}
.pagelink-item .link-intro{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--bgalt);border-radius:50%;color:var(--color);flex-shrink:0;transition:var(--transition)}
.pagelink-item:hover .link-intro{background:var(--color);color:#fff}
.prodetails-content{margin-top:48px;background:#fff;border-radius:16px;padding:36px;border:1px solid rgba(0,0,0,.04)}
.prodetails-des{margin-bottom:24px;display:inline-block}
.prodetails-des span{font-size:20px;font-weight:var(--fontblod7);color:var(--fontcolor);display:block;padding-bottom:12px;border-bottom:3px solid var(--color)}
.prodetails-content article{font-size:15px;line-height:1.9;color:#444}
.prodetails-content article img{border-radius:12px;margin:20px 0}
/* product attributes table */
.prodetails-attr{margin-bottom:28px}
.attr-table{width:100%;border-collapse:collapse;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;font-size:14px}
.attr-table tr:nth-child(even){background:#f9fafb}
.attr-table tr:hover{background:rgba(45,143,92,.04)}
.attr-table th{width:180px;padding:12px 18px;text-align:left;font-weight:var(--fontblod6);color:var(--fontcolor);background:var(--bglight);border-bottom:1px solid #e8e8e8;border-right:1px solid #e8e8e8;white-space:nowrap}
.attr-table td{padding:12px 18px;color:var(--summarycolor);border-bottom:1px solid #e8e8e8;line-height:1.6}
/* === NEWS / ARTICLE LIST === */
.newslist li{display:grid;grid-template-columns:240px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.newslist li:first-child{padding-top:0}
.newslist .news-img{position:relative;border-radius:12px;overflow:hidden}
.newslist .news-img .lazy-wrap::after{padding-bottom:66%}
.newslist .news-img a.lazy-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.newslist .news-img img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:transform .5s}
.newslist li:hover .news-img img{transform:scale(1.05)}
.newslist .news-img .date{position:absolute;bottom:0;left:0;background:var(--color);color:#fff;padding:8px 16px;border-radius:0 12px 0 0;text-align:center;line-height:1.15;z-index:2}
.newslist .news-img .date span{display:block}
.newslist .news-img .date span:first-child{font-size:24px;font-weight:var(--fontblod7)}
.newslist .news-img .date span:nth-child(2){font-size:11px;text-transform:uppercase;opacity:.8}
.newslist .news-img .date span:nth-child(3){font-size:10px;opacity:.6}
.news-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.news-info .title{font-size:19px;font-weight:var(--fontblod6);color:var(--fontcolor);margin-bottom:10px;transition:color .2s;line-height:1.4}
.news-info .title:hover{color:var(--color)}
.news-info .text{font-size:14px;color:var(--summarycolor);line-height:1.7;margin-bottom:16px}
.news-info .btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#fff;background:var(--color);padding:8px 20px;border-radius:999px;font-weight:var(--fontblod5);transition:var(--transition);width:fit-content}
.news-info .btn:hover{background:var(--color-dark);gap:12px}
.newscontent-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(0,0,0,.06)}
.newscontent-meta .newscontent-date{margin-bottom:0;padding-bottom:0;border-bottom:none}
.news-share{display:flex;align-items:center;gap:8px}
.news-share .share-label{font-size:13px;color:var(--summarycolor);margin-right:2px}
.news-share .share-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;font-size:14px;color:#fff;transition:var(--transition)}
.news-share .share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.news-share .facebook{background:#1877f2}
.news-share .twitter{background:#1da1f2}
.news-share .linkedin{background:#0a66c2}
.news-share .pinterest{background:#e60023}
/* === NEWS DETAIL === */
.newscontent-title{font-size:30px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:14px;line-height:1.3;letter-spacing:-.5px}
.newscontent-date{font-size:13px;color:var(--summarycolor);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:4px}
.newscontent-date em{color:var(--color);font-size:15px}
.newscontent-details{background:#fff;border-radius:16px;padding:36px;border:1px solid rgba(0,0,0,.04)}
.newscontent-details article{font-size:15px;line-height:2;color:#444}
.newscontent-details article img{border-radius:12px;margin:20px 0;max-width:100%}
.newscontent-details article p{margin-bottom:18px}
.news-pagelink{display:flex;justify-content:space-between;gap:24px;padding:28px 0;border-top:1px solid rgba(0,0,0,.06);margin-top:36px}
.news-pagelink .pagelink-item{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--summarycolor);max-width:48%}
.news-pagelink .pagelink-item .link-intro{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bgalt);border-radius:50%;color:var(--color);flex-shrink:0;transition:var(--transition)}
.news-pagelink .pagelink-item:hover .link-intro{background:var(--color);color:#fff}
.news-pagelink .link-text a{color:var(--fontcolor);font-size:14px;transition:color .2s}
.news-pagelink .link-text a:hover{color:var(--color)}
.news-pagelink .pagelink-item.next{flex-direction:row-reverse;text-align:right}
/* === CONTACT PAGE === */
.contact-us article{max-width:100%}
.contact-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.contact-item{background:#fff;border-radius:16px;padding:36px 24px;text-align:center;transition:var(--transition);border:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden}
.contact-item::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.contact-item:hover::before{transform:scaleX(1)}
.contact-item:hover{box-shadow:0 16px 40px rgba(45,143,92,.08);transform:translateY(-4px)}
.contact-item .icon{margin-bottom:18px}
.contact-item .title{font-size:16px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:10px}
.contact-item .text{font-size:14px;color:var(--summarycolor);line-height:1.7}
.contact-item .text a{color:var(--color);font-weight:var(--fontblod5)}
.contact-box{background:#fff;border-radius:16px;padding:36px;border:1px solid rgba(0,0,0,.04)}
.inquiry-pc .title{font-size:24px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:8px}
.inquiry-pc .des{font-size:14px;color:var(--summarycolor);margin-bottom:28px}
.inquiry-pc .send-inquiry{display:block}
.inquiry-pc .inquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inquiry-pc .inquiry-form input[type="hidden"],.inquiry-pc .inquiry-form div[style*="display:none"]{display:none}
.inquiry-pc .webfb-name,.inquiry-pc .webfb-email{padding:14px 18px;border:1px solid #d8d8d8;border-radius:999px;font-size:14px;outline:none;transition:border-color .2s;background:#fff;color:var(--fontcolor);width:100%}
.inquiry-pc .webfb-name:focus,.inquiry-pc .webfb-email:focus,.inquiry-pc .webfb-content:focus{border-color:var(--color)}
.inquiry-pc .webfb-content{grid-column:1/-1;padding:14px 18px;border:1px solid #d8d8d8;border-radius:16px;font-size:14px;outline:none;min-height:120px;resize:vertical;transition:border-color .2s;font-family:inherit;background:#fff;color:var(--fontcolor);width:100%}
.inquiry-pc .send-btn{grid-column:1/-1;padding:16px;background:var(--color);color:#fff;border:none;border-radius:999px;font-size:15px;font-weight:var(--fontblod6);cursor:pointer;transition:var(--transition);letter-spacing:.5px;width:100%}
.inquiry-pc .send-btn:hover{background:var(--color-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,143,92,.2)}
.inquiry-pc .webfb-name::placeholder,.inquiry-pc .webfb-email::placeholder,.inquiry-pc .webfb-content::placeholder{color:#999}
/* === FAQ PAGE === */
.faqs-list{max-width:840px;margin:0 auto}
.faqs-list li{margin-bottom:10px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.05);transition:border-color .2s}
.faqs-list li:hover{border-color:rgba(45,143,92,.15)}
.faqs-list li .project-info{padding:0}
.faqs-list li .project-name{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;font-size:16px;font-weight:var(--fontblod6);color:var(--fontcolor);cursor:pointer;transition:var(--transition)}
.faqs-list li .project-name:hover{color:var(--color)}
.faqs-list li .project-name em{font-size:13px;color:var(--summarycolor);transition:transform .25s}
.faqs-list li .project-name.active{color:var(--color);background:var(--bglight)}
.faqs-list li .project-name.active em{transform:rotate(180deg);color:var(--color)}
.faqs-list li .project-content{padding:0 28px 20px;font-size:14px;color:var(--summarycolor);line-height:1.85}

/* === SINGLE PAGE === */
.company-profile{background:var(--bglight)}
.company-profile article{font-size:15px;line-height:2;color:#444;max-width:880px;margin:0 auto;background:#fff;padding:40px 48px;border-radius:16px;border:1px solid rgba(0,0,0,.04)}
.company-profile article img{border-radius:12px;margin:20px 0;max-width:100%}
.company-profile .aboutblue{font-size:30px;font-weight:var(--fontblod7);color:var(--fontcolor);margin-bottom:24px;padding-bottom:16px;position:relative}
.company-profile .aboutblue::after{content:"";position:absolute;bottom:0;left:0;width:48px;height:4px;background:var(--color);border-radius:2px}

/* === CERTIFICATES / IMAGE LIST === */
.certificates-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.certificates-list li{background:#fff;border-radius:16px;overflow:hidden;transition:var(--transition);text-align:center;border:1px solid rgba(0,0,0,.04)}
.certificates-list li:hover{border-color:var(--color);box-shadow:0 16px 40px rgba(45,143,92,.08);transform:translateY(-4px)}
.certificates-list li .img{position:relative;background:#fff;overflow:hidden}
.certificates-list li .img::after{content:"";display:block;padding-bottom:70%}
.certificates-list li .img img{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:cover;transition:transform .5s}
.certificates-list li:hover .img img{transform:scale(1.05)}
.certificates-list li .info{padding:14px 16px;background:var(--bglight)}
.certificates-list li .info .title{font-size:14px;color:var(--fontcolor);font-weight:var(--fontblod5)}
/* === INQUIRY POPUP === */
.inquiry-pop-bd{display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.inquiry-pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:480px;width:94%}
.ico-close-pop{position:absolute;top:14px;right:14px;width:28px;height:28px;cursor:pointer;z-index:2;font-size:20px;color:var(--summarycolor);transition:color .2s}
.ico-close-pop:hover{color:var(--color)}

/* === RESPONSIVE 1280px === */
@media(max-width:1280px){
.page-container{gap:36px}
.pro-list{grid-template-columns:repeat(2,1fr)}
.prodetails-top{gap:36px}
}

/* === RESPONSIVE 1024px === */
@media(max-width:1024px){
.banner-inner{height:240px}
.banner-title-h1{font-size:30px}
.page-container{grid-template-columns:1fr;gap:24px}
.sidebar{order:2}
.prodetails-top{grid-template-columns:1fr;gap:28px}
.preview-container{position:static}
.contact-list{grid-template-columns:1fr}
.certificates-list{grid-template-columns:repeat(2,1fr)}
.newslist li{grid-template-columns:200px 1fr;gap:20px}
.pro-list{grid-template-columns:repeat(2,1fr)}
.prodetails-content{padding:24px}
.newscontent-details{padding:24px}
.newscontent-meta{flex-direction:column;align-items:flex-start;gap:12px}
}

/* === RESPONSIVE 768px === */
@media(max-width:768px){
.banner-inner{height:180px}
.banner-title-h1{font-size:24px}
.common-main{padding:30px 0 50px}
.pro-list{grid-template-columns:1fr;gap:14px}
.newslist li{grid-template-columns:1fr;gap:14px}
.contact-list{grid-template-columns:1fr;gap:14px}
.inquiry-pc .inquiry-form{grid-template-columns:1fr}
.certificates-list{grid-template-columns:1fr 1fr;gap:14px}
.news-pagelink{flex-direction:column;gap:14px}
.news-pagelink .pagelink-item{max-width:100%}
.news-pagelink .pagelink-item.next{flex-direction:row;text-align:left}
.company-profile article{padding:24px 20px}
.prodetails-content{padding:20px}
.attr-table th{width:120px;padding:10px 12px;font-size:13px}
.attr-table td{padding:10px 12px;font-size:13px}
.newscontent-details{padding:20px}
.news-share .share-label{display:none}
.news-share .share-btn{width:28px;height:28px;font-size:12px}
.faqs-list li .project-name{padding:16px 20px;font-size:15px}
}