.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgb(14 50 82 / 50%) #ccc}
.custom-scrollbar::-webkit-scrollbar{width:5px;height:5px}
.custom-scrollbar::-webkit-scrollbar-track{background-color:#ccc;border-radius:5px}
.custom-scrollbar::-webkit-scrollbar-thumb{background-color:rgb(14 50 82 / 50%);border-radius:5px}
.grid{display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:768px){
.grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
.grid{grid-template-columns:repeat(3,1fr)}
}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:30px}
.flexwrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.br{display:inline-block;width:100%;margin-top:10px}
.light-100{font-weight:100}
.light-300{font-weight:300}
.ptop-5{padding-top:5px}
.mtop-5{margin-top:5px}
.pbot-space-section{padding-bottom:var(--space-section)}
.mbot-space-section{margin-bottom:var(--space-section)}
.bg-blue{background-color:var(--color-primary)}
.bg-cyan{background-color:var(--color-cyan)}
.bg-gray{background-color:var(--color-bg-page)}
.bg-white{background-color:#fff}
.bg-black{background-color:#000}
.bg-gradient{background:linear-gradient(180deg,var(--color-primary) 0,var(--color-cyan) 100%)}
.nobanner{padding-top:80px}
@media (max-width:991px){
.nobanner{padding-top:60px}
.nobread{margin-top:2rem}
}
.text-indent{text-indent:2em}
img.alignleft{float:left;margin:15px 15px 15px 0}
img.alignright{float:right;margin:15px 0 15px 15px}
@media (min-width:992px){
.paper-style{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2.5em;transition:all .5s ease-in-out}
}
.section-title{font-size:2.2rem;font-weight:700;color:var(--color-text-title);margin-bottom:10px;position:relative}
.section-subtitle{font-size:1.2rem;color:var(--color-text-secondary);margin-bottom:30px;text-transform:capitalize;line-height:1.5}
.section-desc{font-size:1rem;color:var(--color-text-body);margin-bottom:30px;line-height:1.5}
@media (min-width:992px){
.section-title{font-size:2.5rem}
.section-subtitle{font-size:1.5rem}
}
.text-center{text-align:center}
.text-right{text-align:right}
.uncolor::after{content:"";position:absolute;bottom:0;left:0;width:80px;height:3px;background-color:var(--color-primary)}
.uncolor.text-center::after{left:50%;transform:translateX(-50%)}
@media (max-width:991px){
.text-mo-center{text-align:center}
.uncolor.text-mo-center::after{left:50%;transform:translateX(-50%)}
}
.base-card{position:relative;background-color:var(--color-bg-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform .3s ease,box-shadow .3s ease;padding-bottom:70px}
.base-card:hover{box-shadow:var(--shadow-lg)}
.card-image{width:100%;height:240px;object-fit:cover;transition:transform .4s ease}
.card-title{font-size:1.3rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:all .5s;padding:1.2rem 1.5rem 0}
.card-title:hover{text-shadow:0 0 2px var(--color-border)}
.card-desc{font-size:.95rem;color:var(--color-text-secondary);line-height:20px;height:60px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem}
.card-date{font-size:15px;color:var(--color-text-secondary);position:absolute;display:inline-flex;width:auto;height:30px;align-items:center;left:1.5rem;bottom:1.5rem}
.base-card i{position:absolute;display:inline-flex;width:50px;height:30px;align-items:center;justify-content:center;font-size:1rem;background:#edf2f7;border-radius:5px;transition:all .5s;right:1.5rem;bottom:1.5rem}
.base-card .card-arrow::before{font-family:iconfont;content:"\eb08"}
.news-card .news-link::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.news-card a.card-category{position:relative;z-index:2;cursor:pointer;transition:color .2s,background .2s}
.news-card a.card-category:hover{background:var(--color-cyan);color:#fff}
.news-card .fa_Img{padding-bottom:60%}
.news-card:hover img{transform:translate(-50%,-50%) scale(1.05)}
.news-card:hover .card-title{text-shadow:0 0 2px var(--color-text-secondary)}
.news-card:hover .iconfont{color:var(--color-primary);font-weight:700}
.product-card{padding:1.5rem;height:100%}
@media (min-width:992px){
.product-card{padding:2rem}
}
.product-card:hover{background-color:#f8fbff;cursor:default}
.product-card .fa_Img{padding-bottom:60%;border-radius:var(--radius-sm);transition:transform .5s}
.product-card:hover img{transform:translate(-50%,-50%) scale(1.1)}
.product-card-content{padding-top:1.5rem}
.product-card-content .card-title{font-size:1.4rem;padding:0}
.product-card-content .card-desc{padding:0}
.product-card-content .btn-wrap{display:flex;flex-direction:column;margin-top:1.5rem;gap:20px}
@media (min-width:1024px){
.product-card-content .btn-wrap{flex-direction:row;gap:30px}
}
.product-card-content .btn-wrap a{width:100%;border-radius:var(--radius-md);padding:10px;font-size:14px;text-align:center;color:#666;text-transform:capitalize;transition:background-color .5s,transform .5s,color .5s}
.product-card-content .btn-wrap .btn-primary{background:var(--color-primary);color:#fff}
.product-card-content .btn-wrap .btn-primary:hover{background:var(--color-primary-hover);transform:scale(1.02)}
.product-card-content .btn-wrap .btn-secondary{background:#eee}
.product-card-content .btn-wrap .btn-secondary:hover{background-color:#ccc}
.features{display:flex;flex-wrap:wrap;font-size:14px;color:#555}
.features li{display:inline-flex;align-items:flex-start;width:100%;margin:0 4px}
.features li::before{content:"◆";display:inline-flex;align-items:center;height:22.4px;font-size:6px;color:var(--color-primary);margin-right:10px}
.fa_pagebox{text-align:center;margin-top:30px}
.fa_pagebox .fa_pageitem{font-size:0}
.fa_pagebox a{display:inline-block;border-radius:5px;border:#bbb solid 1px;height:30px;width:30px;background:#fff;margin:0 10px;font-size:16px;color:#000;line-height:30px;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.fa_pagebox span *{margin:0 2px}
.fa_pagebox a:not(.disabled):hover{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.fa_pagebox a.page-num-current{background:var(--color-primary);color:#fff;pointer-events:none}
.fa_pagebox .numeric-buttons{display:none}
.fa_pagebox .nolink{background:#eee!important;color:#aaa!important;pointer-events:none}
@media only screen and (min-width:400px){
.fa_pagebox .mobile-message{display:none}
.fa_pagebox .numeric-buttons{display:inline-block}
}
.filter-section{margin-bottom:40px;padding:30px;background:var(--color-navy);border-radius:var(--radius-sm);display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
@media (min-width:1200px){
.filter-section{justify-content:space-between}
}
.filter-item{flex:1 1 100%;display:flex;align-items:center;gap:12px}
@media (min-width:768px){
.filter-item{flex:1 1 calc(50% - 10px)}
}
@media (min-width:1200px){
.filter-item{max-width:220px}
}
.filter-item label{font-size:14px;color:#fff;white-space:nowrap}
.filter-item select{padding:8px 12px;border:1px solid #ddd;border-radius:var(--radius-sm);width:100%}
.article-navigation{margin-top:20px;padding-top:20px;border-top:1px solid #eee;padding-bottom:20px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:1.1rem;transition:text-decoration .3s ease}
.article-navigation a:hover{text-decoration:underline}
.article-navigation>div{width:100%;display:flex;font-size:12px}
.article-navigation>div span{display:inline-block;margin-right:5px;color:#666}
@media only screen and (min-width:770px){
.article-navigation{margin-top:40px;flex-direction:row;justify-content:space-between;gap:initial;border-bottom:none}
.article-navigation>div{width:48%;font-size:14px;display:flex}
}