.articles-page{background-color:#f8f9fa;padding-top:70px;font-family:Kanit,sans-serif}.page-topic-header{color:#fff;background-color:#44447f;background-image:radial-gradient(at 0 0,#3d3a68 0,#0000 50%),radial-gradient(at 95% 0,#3d3a68 0,#0000 50%),radial-gradient(at 0 95%,#252154 0,#0000 50%),radial-gradient(at 100% 100%,#252154 0,#0000 50%);padding:50px 20px}.topic-header-content{text-align:center;flex-direction:column;align-items:center;gap:20px;max-width:1200px;margin:0 auto 40px;display:flex}.topic-header-text h2{margin:0 0 10px;font-size:2.8rem;font-weight:600}.topic-header-text p{color:#fffc;margin:0;font-size:1.1rem}.page-topic-header .icon-wrapper.large{background-color:#ffffff1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:0;font-size:2.5rem;display:flex}.topic-cards-container{grid-template-columns:1fr;gap:30px;max-width:1200px;margin:0 auto;display:grid}.content-container{max-width:1200px;margin:40px auto 0;padding:40px 20px 60px}.content-header{text-align:left;justify-content:flex-start;align-items:center;gap:20px;margin-bottom:40px;display:flex}.content-header h1{color:#252154;margin:0;font-size:2.5rem}.content-header .icon-wrapper{width:60px;height:60px;font-size:1.8rem}.content-header .icon-wrapper,.item-meta .icon-wrapper{color:#fff;background-color:#252154;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.filter-scroll-container{-ms-overflow-style:none;scrollbar-width:none;width:100%;margin-bottom:40px;overflow-x:auto}.filter-scroll-container::-webkit-scrollbar{display:none}.filter-buttons{gap:10px;padding-bottom:10px;padding-right:20px;display:flex}.filter-btn{cursor:pointer;white-space:nowrap;background-color:#fff;border:1px solid #d0d0d0;border-radius:50px;padding:10px 20px;font-size:.9rem;font-weight:500;transition:all .2s}.filter-btn:hover{background-color:#f0f2f5;border-color:#252154}.filter-btn.active{color:#fff;background-color:#252154;border-color:#252154}.items-grid{grid-template-columns:1fr;gap:30px;display:grid}.item-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 15px #00000014}.item-card-image{width:100%;padding-top:56.25%;position:relative}.item-card-content{flex-direction:column;flex-grow:1;padding:20px;display:flex}.item-card-content h3{color:#333;flex-grow:1;margin:0 0 15px;font-size:1.25rem;line-height:1.4}.item-meta{align-items:center;gap:15px;margin-bottom:20px;display:flex}.item-meta .icon-wrapper.small{width:40px;height:40px;font-size:1rem}.meta-text p{color:#555;margin:0;font-size:.9rem;font-weight:500}.meta-text span{color:#252154;font-size:.9rem;font-weight:600}.read-more-btn{color:#fff;text-align:center;background-color:#252154;border-radius:8px;margin-top:auto;padding:12px;font-weight:600;text-decoration:none;transition:background-color .2s;display:block}.read-more-btn:hover{background-color:#3d3a68}.pagination-controls{justify-content:center;align-items:center;gap:20px;margin-top:40px;display:none}.pagination-controls button{cursor:pointer;background-color:#fff;border:1px solid #d0d0d0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.pagination-controls button:disabled{opacity:.5;cursor:not-allowed}@media (min-width:768px){.articles-page .page-topic-header{text-align:left;flex-direction:row;justify-content:flex-start;gap:30px;padding:40px 60px}.articles-page .page-topic-header .icon-wrapper.large{margin-bottom:0}.articles-page .topic-header-content{text-align:left;flex-direction:row}.articles-page .topic-cards-container,.articles-page .items-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.articles-page .items-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:428px){.pagination-controls{display:flex}.page-topic-header{padding:40px 15px}.topic-header-text h2{font-size:2rem}.topic-header-text p{font-size:1rem}.content-header{padding-top:20px}.content-header h1{font-size:1.8rem}.item-card-content{padding:15px}.item-card-content h3{font-size:1.1rem}.meta-text p,.meta-text span{font-size:.85rem}.read-more-btn{padding:10px;font-size:.9rem}}