/* --- THEME VARIABLES --- */
:root {--brand-color: #ff5722;--brand-dark: #1a1a1a;--bg-body: #f4f6f8;--font-head: 'Roboto Condensed', sans-serif;--font-body: 'Inter', sans-serif;--font-logo: 'Oswald', sans-serif;--font-article: 'Merriweather', serif;--card-border: #e1e4e8;}
body {font-family: var(--font-body);background-color: var(--bg-body);color: #111;overflow-x: hidden;font-size: 14px;}
a {text-decoration: none;color: inherit;transition: all 0.3s ease;}
a:hover {color: var(--brand-color);}
.section-gap {margin-bottom: 30px;}
.section-title {border-bottom: 2px solid #e0e0e0;margin-bottom: 20px;display: flex;justify-content: space-between;align-items: flex-end;padding-bottom: 5px;}
.section-title h3 {font-family: var(--font-head);font-weight: 800;font-size: 18px;text-transform: uppercase;margin: 0;position: relative;}
.section-title h3::after {content: '';position: absolute;bottom: -7px;left: 0;width: 100%;height: 3px;background: var(--brand-color);}
.view-all-link {font-size: 12px;font-weight: 700;color: var(--brand-color);text-transform: uppercase;display: inline-flex;align-items: center;gap: 5px;cursor: pointer;}
.view-all-link i {transition: transform 0.3s ease;font-size: 10px;}
.view-all-link:hover i {transform: translateX(5px);}
/* --- ARTICLE HEADER --- */
.article-header {background: #fff;padding: 30px 0;margin-bottom: 30px;border-bottom: 1px solid #e0e0e0;}
.article-category {display: inline-block;background: var(--brand-color);color: #fff !important;padding: 5px 15px;border-radius: 3px;font-weight: 700;text-transform: uppercase;font-size: 11px;margin-bottom: 15px;letter-spacing: 0.5px;}
.article-title {font-family: var(--font-head);font-weight: 800;font-size: 38px;line-height: 1.15;color: #111;margin-bottom: 20px;}
/* --- ACTION BUTTONS --- */
.article-actions {display: flex;align-items: center;gap: 15px;flex-wrap: wrap;}
.action-btn {display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;border-radius: 50px;font-size: 13px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: none;}
.action-btn i {font-size: 14px;}
.action-btn.save-btn {background: #f0f0f0;color: #333;}
.action-btn.save-btn:hover {background: var(--brand-color);color: #fff;}
.action-btn.save-btn.saved {background: var(--brand-color);color: #fff;}
.action-btn.copy-btn {background: #f0f0f0;color: #333;}
.action-btn.copy-btn:hover {background: #333;color: #fff;}
.action-btn.copy-btn.copied {background: #27ae60;color: #fff;}
/* --- SHARE BUTTONS --- */
.share-buttons {display: flex;align-items: center;gap: 10px;margin-left: auto;}
.share-label {font-size: 12px;color: #888;font-weight: 600;text-transform: uppercase;}
.share-btn {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 14px;transition: all 0.3s ease;}
.share-btn:hover {transform: translateY(-3px);color: #fff;}
.share-btn.facebook {background: #1877f2;}
.share-btn.twitter {background: #1da1f2;}
.share-btn.whatsapp {background: #25d366;}
.share-btn.linkedin {background: #0077b5;}
/* --- FEATURED IMAGE --- */
.article-featured-image {margin-bottom: 30px;}
.article-featured-image img {width: 100%;border-radius: 8px;box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);}
.image-caption {font-size: 13px;color: #888;margin-top: 12px;font-style: italic;}
/* --- ARTICLE CONTENT --- */
.article-content {background: #fff;padding: 40px;border-radius: 8px;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.article-body {font-family: var(--font-article);font-size: 18px;line-height: 1.9;color: #333;}
.article-body p {margin-bottom: 25px;}
.article-body h2 {font-family: var(--font-head);font-weight: 700;font-size: 26px;margin: 40px 0 20px;color: #111;}
.article-body h3 {font-family: var(--font-head);font-weight: 700;font-size: 22px;margin: 35px 0 15px;color: #111;}
.article-body blockquote {border-left: 4px solid var(--brand-color);padding: 20px 30px;margin: 30px 0;background: #f8f9fa;font-style: italic;font-size: 20px;color: #444;}
.article-body blockquote cite {display: block;margin-top: 15px;font-size: 14px;font-style: normal;font-weight: 600;color: var(--brand-color);}
.article-body ul,.article-body ol {margin: 25px 0;padding-left: 25px;}
.article-body li {margin-bottom: 12px;}
.article-body a {color: var(--brand-color);text-decoration: underline;}
.article-body img {max-width: 100%;border-radius: 6px;margin: 25px 0;}
/* --- HIGHLIGHT BOX --- */
.highlight-box {background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);border: 1px solid #ffe0d6;border-left: 4px solid var(--brand-color);padding: 25px 30px;border-radius: 6px;margin: 30px 0;}
.highlight-box h4 {font-family: var(--font-head);font-weight: 700;font-size: 18px;margin-bottom: 15px;color: var(--brand-color);}
.highlight-box ul {margin: 0;padding-left: 20px;}
.highlight-box li {margin-bottom: 8px;color: #555;}
/* --- TAGS --- */
.article-tags {margin-top: 40px;padding-top: 30px;border-top: 1px solid #eee;}
.article-tags h5 {font-family: var(--font-head);font-weight: 700;font-size: 14px;text-transform: uppercase;margin-bottom: 15px;color: #888;}
.tag-list {display: flex;flex-wrap: wrap;gap: 10px;}
.tag-item {background: #f0f0f0;color: #555;padding: 6px 14px;border-radius: 20px;font-size: 12px;font-weight: 600;transition: all 0.3s ease;}
.tag-item:hover {background: var(--brand-color);color: #fff;}
/* --- AUTHOR BOX --- */
.author-box {background: #fff;border-radius: 8px;padding: 30px;display: flex;gap: 25px;margin-bottom: 30px;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);}
.author-box-avatar {width: 100px;height: 100px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.author-box-content {flex: 1;}
.author-box-content h4 {font-family: var(--font-head);font-weight: 700;font-size: 20px;margin-bottom: 5px;}
.author-box-content .author-role {color: var(--brand-color);font-size: 13px;font-weight: 600;margin-bottom: 12px;}
.author-box-content p {color: #666;font-size: 14px;line-height: 1.6;margin-bottom: 15px;}
.author-actions {display: flex;align-items: center;gap: 15px;flex-wrap: wrap;}
.view-profile-btn {display: inline-flex;align-items: center;gap: 8px;background: var(--brand-color);color: #fff;padding: 10px 20px;border-radius: 50px;font-size: 13px;font-weight: 600;transition: all 0.3s ease;}
.view-profile-btn:hover {background: var(--brand-dark);color: #fff;transform: translateY(-2px);}
.author-social {display: flex;gap: 10px;}
.author-social a {width: 36px;height: 36px;background: #f0f0f0;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #666;font-size: 14px;transition: all 0.3s ease;}
.author-social a:hover {background: var(--brand-color);color: #fff;}
/* --- COMMENTS SECTION --- */
.comments-section {background: #fff;border-radius: 8px;padding: 30px;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.comments-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;}
.comments-count {font-family: var(--font-head);font-weight: 700;font-size: 20px;}
.comment-form {margin-bottom: 30px;padding-bottom: 25px;border-bottom: 1px solid #eee;}
.comment-form textarea {border: 1px solid #e0e0e0;border-radius: 8px;padding: 15px;width: 100%;min-height: 100px;resize: vertical;font-size: 14px;margin-bottom: 15px;}
.comment-form textarea:focus {outline: none;border-color: var(--brand-color);}
.comment-form .btn-post {background: var(--brand-color);color: #fff;border: none;padding: 10px 25px;border-radius: 50px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;}
.comment-form .btn-post:hover {background: var(--brand-dark); transform: translateY(-2px); }
.comment-item {display: flex;gap: 15px;padding: 20px 0;border-bottom: 1px solid #f0f0f0;}
.comment-item:last-child {border-bottom: none;padding-bottom: 0;}
.comment-avatar {width: 45px;height: 45px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.comment-content {flex: 1;}
.comment-author {font-weight: 700;color: #111;font-size: 14px;}
.comment-time {font-size: 11px;color: #999;margin-left: 10px;font-weight: 400;}
.comment-text {font-size: 14px;color: #555;line-height: 1.6;margin: 8px 0;}
.comment-actions a {font-size: 12px;color: #888;margin-right: 15px;}
.comment-actions a:hover {color: var(--brand-color);}
/* --- SIDEBAR STYLES --- */
.sticky-sidebar {position: sticky;top: 20px;}
/* --- SIDEBAR NEWS CARD (GRID STYLE) --- */
.news-card {transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);border: 1px solid var(--card-border);border-bottom: 3px solid var(--card-border);position: relative;top: 0;background: #fff;border-radius: 4px;overflow: hidden;margin-bottom: 15px;}
.news-card:last-child {margin-bottom: 0;}
.news-card:hover {transform: translateY(-5px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);border-bottom-color: var(--brand-color);border-color: transparent;}
.news-card .img-wrap {overflow: hidden;border-radius: 0;position: relative;height: 150px;}
.news-card .img-wrap img {transition: transform 0.6s ease;width: 100%;height: 100%;object-fit: cover;}
.news-card:hover .img-wrap img {transform: scale(1.1);}
.news-card .card-content {padding: 15px;}
.news-card .cat-badge {font-size: 10px;font-weight: 700;text-transform: uppercase;color: var(--brand-color);margin-bottom: 4px;display: block;}
.news-card .news-title {font-family: var(--font-head);font-weight: 700;font-size: 15px;line-height: 1.3;margin-top: 5px;margin-bottom: 5px;color: #111;}
.news-card .news-title a {color: inherit;}
.news-card:hover .news-title {color: var(--brand-color);}
.news-card .time-stamp {font-size: 11px;color: #888;font-weight: 600;text-transform: uppercase;display: block;margin-top: 5px;}
.news-card:hover .time-stamp {color: var(--brand-color) !important;}
/* --- AD SECTION --- */
.ad-section-wrapper {width: 100%;background: #f8f9fa;border: 1px dashed #ced4da;margin: 30px 0;padding: 15px;display: flex;justify-content: center;align-items: center;flex-direction: column;border-radius: 6px;}
.ad-section-wrapper.sidebar-ad {margin: 0 0 25px 0;}
.ad-label {font-size: 10px;color: #999;margin-bottom: 5px;text-transform: uppercase;letter-spacing: 1px;}
.ad-box {background: #fff;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;color: #ccc;font-size: 12px;}
.ad-box-300x250 {width: 300px;height: 250px;max-width: 100%;}
.ad-box-horizontal {width: 728px;height: 90px;max-width: 100%;}
/* --- RESPONSIVE --- */
@media (max-width: 991px) {
.article-title {font-size: 30px;}
.article-content {padding: 30px;}
.article-body {font-size: 16px;}
.author-box {flex-direction: column;text-align: center;}
.author-box-avatar {margin: 0 auto;}
.author-actions {justify-content: center;}
.article-actions {flex-direction: column;align-items: flex-start;}
.share-buttons {margin-left: 0;margin-top: 15px;}
}
@media (max-width: 767px) {
.article-header {padding: 20px 0;}
.article-title {font-size: 24px;}
.article-content {padding: 20px;}
.article-body {font-size: 15px;}
.comments-section {padding: 20px;}
.section-title h3 {font-size: 16px;}
.news-card .img-wrap {height: 120px;}
.article-inline-image {margin: 18px 0;}
.article-inline-image img {width: 100%;height: auto;border-radius: 12px;display: block;}
.market-ticker-wrap {display: none !important;}
.reply-list {margin-left: 30px;padding-left: 14px;border-left: 2px solid #eee;}
.reply-list .comment-avatar {width: 34px;height: 34px;border-radius: 50%;object-fit: cover;}
.reply-list .comment-item {margin-top: 12px !important;}
.reply-list .comment-text {font-size: 14px;line-height: 1.45;}
@media (max-width: 576px) {
.reply-list {margin-left: 16px;padding-left: 10px;}
}
.reply-box {margin-left: 30px;padding-left: 14px;}

@media(max-width: 576px) {
.reply-box {margin-left: 16px;padding-left: 10px;}
}
.comment-actions a {margin-right: 14px;}
.reply-input-wrap {position: relative;padding-bottom: 12px;}
.reply-input-wrap .comment-inline-error {position: absolute;bottom: 0;left: 10;}
.reply-box .js-reply-submit {margin-top: 12px !important; background: var(--brand-color); }
.comment-input-wrap {position: relative;}
.reply-text.is-invalid {border: 1px solid var(--brand-color) !important;background: rgba(220, 181, 53, 0.04);box-shadow: 0 0 0 3px rgba(220, 189, 53, 0.12);padding-bottom: 32px;}
.reply-text.shake {animation: shakeX .25s ease-in-out;}
.comment-inline-error {position: absolute;left: 14px;bottom: 10px;font-size: 12px;color: var(--brand-color);pointer-events: none;opacity: 0;transform: translateY(4px);transition: opacity .15s ease, transform .15s ease;}
.comment-input-wrap.has-error .comment-inline-error {opacity: 1;transform: translateY(0);}
.comment-input-wrap.has-error .comment-inline-error {opacity: 1;transform: translateY(0);}
#comment_text.is-invalid {border: 1px solid var(--brand-color) !important;background: rgba(220, 53, 69, .04);box-shadow: 0 0 0 3px rgba(220, 167, 53, 0.12);padding-bottom: 32px;}
@keyframes shakeX {
0%,
100% {transform: translateX(0);}
20% {transform: translateX(-4px);}
40% {transform: translateX(4px);}
60% {transform: translateX(-3px);}
80% {transform: translateX(3px);}
}
#comment_text.shake {animation: shakeX .25s ease-in-out;}
#comment_text {width: 100%;resize: vertical;padding: 14px 14px;padding-bottom: 18px;line-height: 1.5;}
.comment-inline-error {left: 14px;right: 14px;bottom: 10px;z-index: 2;background: rgba(255, 255, 255, .85);padding: 2px 6px;border-radius: 6px;display: inline-block;width: fit-content;max-width: calc(100% - 28px);}
.comment-input-wrap {position: relative;width: 100%;}
.sidebar-trending .news-card { display: block; margin: 0 0 16px 0;}
.sidebar-trending .news-card:last-child { margin-bottom: 0;}
.sidebar-related .news-card-link { display: block;margin: 0 0 16px 0;text-decoration: none;}
.sidebar-related .news-card-link:last-child {margin-bottom: 0;}
.sidebar-related .news-card {margin: 0 !important;}
.comment-content, .comment-text, .reply-list .comment-text, .article-body, .article-body p, .article-body li {max-width: 100%;overflow-wrap: anywhere;word-break: break-word;}
.comment-text a, .reply-list .comment-text a, .article-body a {overflow-wrap: anywhere;word-break: break-word;}
.comment-text a, .reply-list .comment-text a, .article-body a {word-break: break-all;}
.comment-item, .comment-content {min-width: 0;}
.article-inline-image { margin: 18px 0;}
.article-inline-image img {width: 100%;height: auto;border-radius: 12px;display: block;}
.market-ticker-wrap {display: none !important;}
.reply-list {margin-left: 30px;padding-left: 14px;border-left: 2px solid #eee;}
.reply-list .comment-avatar {width: 34px;height: 34px;border-radius: 50%;object-fit: cover;}
.reply-list .comment-item { margin-top: 12px !important;}
.reply-list .comment-text {font-size: 14px;line-height: 1.45;}
/* mobile adjust */
@media (max-width: 576px) {
.reply-list {margin-left: 16px;padding-left: 10px;}
}
.reply-box {margin-left: 30px;padding-left: 14px;}
@media(max-width: 576px) {
.reply-box {margin-left: 16px; padding-left: 10px;}
}
.comment-actions a {margin-right: 14px;}
.reply-input-wrap {position: relative;padding-bottom: 12px;}
.reply-input-wrap .comment-inline-error {position: absolute;bottom: 0;left: 10;}
.reply-box .js-reply-submit {margin-top: 12px !important;}
.comment-input-wrap {position: relative;}
.reply-text.is-invalid {border: 1px solid var(--brand-color) !important;background: rgba(220, 53, 69, .04);box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);padding-bottom: 32px;}
.reply-text.shake {animation: shakeX .25s ease-in-out;}
.comment-inline-error {position: absolute;left: 14px;bottom: 10px;font-size: 12px;color: var(--brand-color);pointer-events: none;opacity: 0;transform: translateY(4px);transition: opacity .15s ease, transform .15s ease;}
.comment-input-wrap.has-error .comment-inline-error {opacity: 1;transform: translateY(0);}
.comment-input-wrap.has-error .comment-inline-error {opacity: 1;transform: translateY(0);}
#comment_text.is-invalid {border: 1px solid var(--brand-color) !important;background: rgba(220, 53, 69, .04);box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);padding-bottom: 32px;}
@keyframes shakeX {
0%,
100% {transform: translateX(0);}
20% {transform: translateX(-4px);}
40% {transform: translateX(4px);}
60% {transform: translateX(-3px);}
80% {transform: translateX(3px);}
}
#comment_text.shake {animation: shakeX .25s ease-in-out;}
#comment_text {width: 100%;resize: vertical;padding: 14px 14px;padding-bottom: 18px;line-height: 1.5;}
.comment-inline-error {left: 14px;right: 14px;bottom: 10px;z-index: 2;background: rgba(255, 255, 255, .85);padding: 2px 6px;border-radius: 6px;display: inline-block;width: fit-content;max-width: calc(100% - 28px);}
.comment-input-wrap {position: relative;width: 100%;}
.sidebar-trending .news-card {display: block;margin: 0 0 16px 0;}
.sidebar-trending .news-card:last-child {margin-bottom: 0;}
.sidebar-related .news-card-link {display: block;margin: 0 0 16px 0;text-decoration: none;}
.sidebar-related .news-card-link:last-child {margin-bottom: 0;}
.sidebar-related .news-card {margin: 0 !important;}
.comment-content, .comment-text, .reply-list .comment-text, .article-body, .article-body p, .article-body li {max-width: 100%;overflow-wrap: anywhere;word-break: break-word;}
.comment-text a, .reply-list .comment-text a, .article-body a {overflow-wrap: anywhere;word-break: break-word;}
.comment-text a, .reply-list .comment-text a, .article-body a {word-break: break-all;}
.comment-item, .comment-content {min-width: 0;}
}