.article-page{background:#fafafa;min-height:100vh;padding:0}.article-hero{margin:0;overflow:hidden;position:relative;width:100%}.article-hero .hero-image{display:block;height:500px;object-fit:cover;width:100%}.article-container{background:#fff;box-shadow:0 2px 20px #0000000f;margin:0 auto;max-width:900px;padding-bottom:60px}.article-header{padding:50px 60px 30px;text-align:center}.article-header .article-meta{align-items:center;display:flex;flex-wrap:wrap;font-size:12px;font-weight:400;gap:12px;justify-content:center;margin-bottom:20px}.article-header .article-meta .category{color:#999;letter-spacing:2px;text-transform:uppercase}.article-header .article-meta .category a{border-radius:0;color:#999;display:inline-block;font-weight:400;padding:0;text-decoration:none;transition:all .3s ease}.article-header .article-meta .category a:hover{background:#0000;color:#000;transform:none}.article-header .article-meta .author,.article-header .article-meta .date{color:#999;letter-spacing:2px}.article-header .article-meta .separator{color:#ddd;font-size:10px}.article-header .article-title{color:#000;font-size:38px;font-weight:700;line-height:1.3;margin:20px 0 30px}.article-header .read-time{align-items:center;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;color:#999;display:inline-flex;font-size:13px;font-weight:400;gap:8px;padding:10px 0}.article-header .read-time i{font-size:14px}.article-content{color:#333;font-size:17px;line-height:1.8;padding:40px 60px}.article-content p{margin-bottom:25px;text-align:justify}.article-content h2{color:#000;font-size:28px;font-weight:700;margin:40px 0 20px}.article-content h3{font-size:22px;margin:30px 0 15px}.article-content h3,.article-content strong{color:#000;font-weight:600}.article-content a{border-bottom:1px solid #000;color:#000;font-weight:500;text-decoration:none;transition:all .3s ease}.article-content a:hover{opacity:.6}.article-content blockquote{border-left:3px solid #e0e0e0;color:#666;font-style:italic;margin:30px 0;padding-left:25px}.article-content ol,.article-content ul{margin:20px 0 20px 30px}.article-content ol li,.article-content ul li{margin-bottom:10px}.article-content img{border-radius:0;height:auto;margin:30px 0;max-width:100%}.article-content table.bbcode-table{background:#fff;border:1px solid #e0e0e0;border-collapse:collapse;border-radius:0;box-shadow:0 1px 3px #0000000d;margin:20px 0;overflow:hidden;width:100%}.article-content table.bbcode-table thead{background:#fafafa;color:#000}.article-content table.bbcode-table thead th{border:1px solid #e0e0e0;font-weight:600;padding:12px 16px;text-align:left}.article-content table.bbcode-table tbody tr{transition:background-color .2s ease}.article-content table.bbcode-table tbody tr:hover{background:#fafafa}.article-content table.bbcode-table tbody tr:nth-child(2n){background:#fafafa80}.article-content table.bbcode-table tbody td{border:1px solid #e0e0e0;padding:10px 16px}.article-social{display:flex;gap:15px;justify-content:center;padding:0 60px 40px}.article-social .social-btn{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:50%;color:#333;display:flex;font-size:18px;height:45px;justify-content:center;text-decoration:none;transition:all .3s ease;width:45px}.article-social .social-btn:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-3px)}.article-social .social-btn.facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}.article-social .social-btn.twitter:hover{background:#000;border-color:#000;color:#fff}.article-social .social-btn.pinterest:hover{background:#e60023;border-color:#e60023;color:#fff}.article-social .social-btn.linkedin:hover{background:#0077b5;border-color:#0077b5;color:#fff}.article-comments{border-top:1px solid #e0e0e0;margin-top:40px;padding:40px 60px 0}.article-comments h2{color:#000;font-size:24px;font-weight:600;margin-bottom:30px;text-align:center}.article-comments .comments-list{list-style:none;margin:0 0 40px;padding:0}.article-comments .comments-list .comment-item{background:#fafafa;border:1px solid #e0e0e0;border-radius:0;margin-bottom:15px;padding:25px 30px;transition:all .3s ease}.article-comments .comments-list .comment-item:hover{box-shadow:0 2px 10px #0000000d;transform:translateX(5px)}.article-comments .comments-list .comment-item .comment-meta{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:15px}.article-comments .comments-list .comment-item .comment-meta strong{color:#000;font-size:15px;font-weight:600}.article-comments .comments-list .comment-item .comment-meta .comment-date{color:#999;font-size:12px;font-weight:400}.article-comments .comments-list .comment-item .comment-content{color:#333;font-size:15px;line-height:1.6}.article-comments p{color:#999;font-size:15px;font-style:italic;padding:40px 0;text-align:center}.article-comments .comment-form{background:#fafafa;border:1px solid #e0e0e0;border-radius:0;margin-top:40px;padding:30px}.article-comments .comment-form h3{color:#000;font-size:20px;font-weight:600;margin-bottom:25px}.article-comments .comment-form .form-group{margin-bottom:20px}.article-comments .comment-form .form-group label{color:#333;display:block;font-size:13px;font-weight:500;letter-spacing:1px;margin-bottom:8px;text-transform:uppercase}.article-comments .comment-form .form-group input[type=email],.article-comments .comment-form .form-group input[type=text],.article-comments .comment-form .form-group textarea{background:#fff;border:1px solid #e0e0e0;border-radius:4px;font-family:inherit;font-size:15px;padding:12px 18px;transition:all .3s ease;width:100%}.article-comments .comment-form .form-group input[type=email]:focus,.article-comments .comment-form .form-group input[type=text]:focus,.article-comments .comment-form .form-group textarea:focus{border-color:#000;box-shadow:0 0 0 3px #0000000d;outline:none}.article-comments .comment-form .form-group textarea{min-height:120px;resize:vertical}.article-comments .comment-form .btn-primary{background:#000;border:2px solid #000;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;letter-spacing:1.5px;padding:12px 35px;text-transform:uppercase;transition:all .3s ease}.article-comments .comment-form .btn-primary:hover{background:#fff;box-shadow:0 4px 12px #00000026;color:#000;transform:translateY(-2px)}.article-comments .comment-form .btn-primary:active{transform:translateY(0)}@media(max-width:768px){.article-hero .hero-image{border-radius:0 0 20px 20px;height:300px}.article-header{padding:30px 25px 20px}.article-header .article-title{font-size:28px}.article-content{font-size:16px;padding:30px 25px}.article-content h2{font-size:24px}.article-content h3{font-size:20px}.article-social{padding:0 25px 40px}.article-comments{padding:30px 25px 0}.article-comments h2{font-size:24px}.article-comments .comments-list .comment-item{padding:20px}.article-comments .comments-list .comment-item .comment-meta{align-items:flex-start;flex-direction:column}.article-comments .comment-form{padding:20px}.article-comments .comment-form h3{font-size:20px}}.lightbox-overlay{animation:fadeIn .3s ease;background-color:#000000e6;cursor:zoom-out;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.lightbox-overlay.active{align-items:center;display:flex;justify-content:center}.lightbox-content{animation:zoomIn .3s ease;max-height:90%;max-width:90%;position:relative}.lightbox-content img{border-radius:4px;box-shadow:0 4px 20px #00000080;height:auto;max-height:90vh;max-width:100%;width:auto}.lightbox-close{color:#fff;cursor:pointer;font-size:40px;position:absolute;right:30px;top:20px;transition:color .3s ease;z-index:10000}.lightbox-close:hover{color:#ccc}.lightbox-next,.lightbox-prev{color:#fff;cursor:pointer;font-size:40px;padding:20px;position:absolute;top:50%;transform:translateY(-50%);transition:color .3s ease;user-select:none}.lightbox-next:hover,.lightbox-prev:hover{color:#ccc}.lightbox-prev{left:20px}.lightbox-next{right:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.article-content img{cursor:zoom-in;transition:opacity .3s ease}.article-content img:hover{opacity:.9}