/* ========================================================================
   Variables
   ======================================================================== */
:root {
  --at-red: #d90000;
  --at-dark-blue: #002765;
  --at-light-blue: #001538;
  --at-text-dark: #333;
  --at-text-light: #666;
  --at-border-color: #1a3e76;
  --at-bg-light: #f8f9fa;

  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --background-color: #f8f9fa;
  --pill-bg: #f6f6f6;
  --pill-border: #d5d5d5;
  --pill-text: #000;
  --arrow-bg: #bfbaba;
  --arrow-bg-disabled: #d9d9d9;
  --arrow-color: #000;
  --arrow-color-disabled: #9a9a9a;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --background-light: #f4f7f9;
  --card-bg: #fff;
  --text-color: #2c3e50;
  --text-light: #5a6a7a;
  --heading-color: #1a2533;
  --accent-color: #d14d00;
  --border-radius: 12px;
  --border-color: #e8eef2;
}

 <style>
        :root {
            --at-red: #d90000;
            --at-dark-blue: #002765;
            --at-light-blue: #001538;
            --at-text-dark: #333;
            --at-text-light: #666;
            --at-border-color: #1a3e76;
            --at-bg-light: #f8f9fa;
        }

        body {
            margin: 0;
            font-family: 'Noto Sans', sans-serif;
            background-color: var(--at-bg-light);
        }

        *,
        ::before,
        ::after {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* --- Main Header Structure --- */
        .site-header {
            background-color: var(--at-dark-blue);
            color: #fff;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .header-main-bar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1270px;
            margin: 0 auto;
            padding: 0 1rem;
            height: 60px;
            position: relative;
        }

        .hamburger-menu-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }

        .hamburger-menu-btn svg {
            display: block;
            width: 24px;
            height: 24px;
            fill: #fff;
        }

        .header-logo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header-logo img {
            display: block;
            height: 45px;
            width: auto;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-actions a {
            color: #fff;
        }

        .header-actions svg {
            width: 24px;
            height: 24px;
            fill: #fff;
        }

        /* --- Desktop Navigation --- */
        .desktop-main-nav {
            display: none;
        }

        @media (min-width: 1024px) {
            .hamburger-menu-btn {
                display: none;
            }

            .header-main-bar-inner {
                justify-content: flex-start;
                gap: 2rem;
            }

            .header-logo {
                position: static;
                transform: none;
            }

            .header-logo img {
                height: 40px;
            }

            .header-actions {
                margin-left: auto;
            }

            .desktop-main-nav {
                display: flex;
                height: 100%;
                align-items: center;
            }

            .desktop-main-nav>ul {
                display: flex;
                height: 100%;
                align-items: center;
                gap: 1.25rem;
            }

            .desktop-main-nav li {
                position: relative;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .desktop-main-nav>ul>li>a {
                padding: 0 0.2rem;
                font-size: 16px;
                font-weight: 700;
                position: relative;
                color: #fff;
                height: 100%;
                display: flex;
                align-items: center;
            }

            /* Submenu Styles */
            .desktop-main-nav .submenu {
                display: none;
                position: absolute;
                top: 100%;
                left: -1rem;
                background-color: var(--at-light-blue);
                padding: 0.75rem;
                border-radius: 0 0 8px 8px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
                min-width: 220px;
                white-space: nowrap;
            }

            .desktop-main-nav li:hover>.submenu {
                display: block;
            }

            .desktop-main-nav .submenu a {
                padding: 0.6rem 1rem;
                display: block;
                font-size: 14px;
                font-weight: 400;
                border-radius: 4px;
            }

            .desktop-main-nav .submenu a:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            /* All Sections "Mega Menu" Toggle Button */
            #all-sections-toggle-btn {
                background: none;
                border: none;
                cursor: pointer;
                color: #fff;
            }

            #all-sections-toggle-btn svg {
                width: 28px;
                height: 28px;
            }
        }

        .header-top-bar {
            background-color: #fff;
            border-bottom: 1px solid var(--at-border-color);
        }

        .header-top-bar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1270px;
            margin: 0 auto;
            padding: 0 1rem;
            height: 32px;
        }

        .network-nav>ul {
            display: flex;
            gap: 1.25rem;
            overflow-x: auto;
            /* Allow horizontal scrolling on mobile */
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .network-nav>ul::-webkit-scrollbar {
            display: none;
        }

        /* Chrome, Safari, Opera */
        .network-nav a {
            font-size: 11px;
            font-weight: 700;
            color: #938e8e;
            font-family: Arial, sans-serif;
            white-space: nowrap;
        }

        .network-nav a:hover {
            color: var(--at-red);
        }

        .network-nav-more {
            position: relative;
        }

        .network-nav-more .submenu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            padding: 0.5rem;
            min-width: 180px;
            z-index: 1100;
        }

        .network-nav-more:hover .submenu {
            display: block;
        }

        .network-nav-more .submenu a {
            display: block;
            padding: 0.5rem 1rem;
        }

        /* --- Mega Menu Panel (Desktop) --- */
        .mega-menu-panel {
            display: none;
            position: absolute;
            top: 60px;
            /* Height of main header */
            left: 0;
            width: 100%;
            background: #fff;
            color: #000;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            padding: 2rem;
            border-top: 1px solid var(--at-border-color);
        }

        .mega-menu-panel.is-open {
            display: block;
        }

        .mega-menu-inner {
            max-width: 1270px;
            margin: 0 auto;
        }

        .mega-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--at-red);
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }

        .mega-menu-header h2 {
            font-size: 24px;
            color: var(--at-text-dark);
        }

        #mega-menu-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 2rem;
            color: var(--at-text-light);
        }

        .mega-menu-columns {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 2rem;
        }

        .mega-menu-column h3 {
            font-size: 18px;
            color: var(--at-red);
            margin-bottom: 1rem;
        }

        .mega-menu-column ul li a {
            display: block;
            padding: 0.5rem 0;
            color: var(--at-text-dark);
            font-size: 15px;
        }

        .mega-menu-column ul li a:hover {
            color: var(--at-red);
        }

        /* Mobile Menu styles from previous version */
        /* ... (mobile menu styles remain largely the same) ... */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .mobile-menu-panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 320px;
            max-width: 85vw;
            height: 100%;
            background-color: var(--at-dark-blue);
            z-index: 1001;
            transform: translateX(-100%);
            transition: transform 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }

        .mobile-menu-panel.is-open {
            transform: translateX(0);
        }

        .mobile-menu-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }

        body.mobile-menu-is-open {
            overflow: hidden;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--at-border-color);
        }

        .mobile-menu-logo img {
            height: 30px;
        }

        .mobile-menu-close-btn {
            background: none;
            border: none;
            cursor: pointer;
        }

        .mobile-menu-close-btn svg {
            width: 24px;
            height: 24px;
            fill: #fff;
        }

        .mobile-menu-nav {
            overflow-y: auto;
            flex-grow: 1;
        }

        .mobile-menu-nav ul li a {
            display: block;
            padding: 0.8rem 1rem;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            border-bottom: 1px solid #1a3e76;
        }

        .network-nav {
    width: 100%;
    overflow-x: auto;          /* enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

.network-nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.1rem;              /* spacing between items */
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    min-width: 600px; /* ensures enough width for scroll */
    background: none;
}

.network-nav li {
    flex: 0 0 auto;           /* prevents shrinking */
}

.network-nav a {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    color: #757575;
    font-size: 0.93rem;
    font-weight: 700;
    border-radius: 18px;
    background: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    text-transform:uppercase;
}

.network-nav a:hover,
.network-nav a:focus {
    background: #eaf0fa;
    color: #0050b3;
    text-decoration: none;
}

/* Hide scrollbar but allow scroll (for Webkit browsers) */
.network-nav ul::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.network-nav ul {
    scrollbar-width: none;
}

/* Dropdown submenu styles */
.network-nav-more {
    position: relative;
}
.network-nav-more .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    border-radius: 8px;
    z-index: 99;
    padding: 0.5rem 0;
}
.network-nav-more:hover .submenu,
.network-nav-more:focus-within .submenu {
    display: block;
}
.network-nav-more .submenu a {
    color: #333;
    padding: 0.55rem 1.2rem;
    display: block;
    font-size: 0.95rem;
    border-radius: 0;
    background: none;
}
.network-nav-more .submenu a:hover {
    background: #eaf0fa;
    color: #0050b3;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .network-nav {
        margin: 0 -1rem;
        padding: 0 1rem;
        background: #fff;
    }
    .network-nav ul {
        min-width: unset;
        gap: 0.8rem;
    }
    .network-nav a {
        font-size: 0.76rem;
        padding: 0.2rem 0.2rem;
    }
    .network-nav li.network-nav-more {
        /* Optionally, hide submenu on mobile if not needed */
    }
}


        .network-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.network-nav-list > li { position: relative; }
.network-nav-list > li > a { background: #f8f9f9; padding: .5rem 1rem; border-radius: 4px; border: 1px solid #ccc; text-decoration: none; color: #333; transition: .2s; display: inline-block;}
.network-nav-list > li > a:hover, .network-nav-list .submenu a:hover { background: #e2e2e2; }
.network-nav-more:hover .submenu, .network-nav-more:focus-within .submenu { display: block; }
.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 180px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 
}
    


/* ========================================================================
   Reset & Base
   ======================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
  background-color: var(--at-bg-light);
  color: var(--text-color);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ========================================================================
   Header & Navigation
   ======================================================================== */
.site-header { background: var(--at-dark-blue); color: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.header-main-bar-inner { display: flex; align-items: center; justify-content: space-between; max-width:1270px; margin:auto; padding:0 1rem; height:60px; position:relative; }
.hamburger-menu-btn { background:none; border:none; cursor:pointer; padding:.5rem; }
.header-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.header-logo img { height:45px; }
.header-actions { display:flex; align-items:center; gap:1rem; }
.header-actions svg, .header-actions a { fill:#fff; }

/* Desktop nav */
.desktop-main-nav { display:none; }
@media(min-width:1024px){
  .hamburger-menu-btn { display:none; }
  .desktop-main-nav { display:flex; align-items:center; height:100%; }
  .desktop-main-nav > ul { display:flex; gap:1.25rem; height:100%; align-items:center; }
  .desktop-main-nav li { position:relative; }
  .desktop-main-nav a { color:#fff; font-weight:700; padding:.2rem; }
  .desktop-main-nav .submenu { display:none; position:absolute; top:100%; left:-1rem; background:var(--at-light-blue); padding:.75rem; border-radius:0 0 8px 8px; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
  .desktop-main-nav li:hover > .submenu { display:block; }
}

/* Top bar network nav */
.header-top-bar { background:#fff; border-bottom:1px solid var(--at-border-color); }
.network-nav ul { display:flex; gap:1.25rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.network-nav ul::-webkit-scrollbar { display:none; }
.network-nav a { font-size:11px; font-weight:700; color:#938e8e; white-space:nowrap; padding:.45rem .75rem; background:none; border-radius:18px; text-transform:uppercase; transition:.15s; }
.network-nav a:hover { background:#eaf0fa; color:#0050b3; }

/* Mega menu */
.mega-menu-panel { display:none; position:absolute; top:60px; left:0; width:100%; background:#fff; padding:2rem; box-shadow:0 5px 15px rgba(0,0,0,0.3); border-top:1px solid var(--at-border-color); }
.mega-menu-panel.is-open { display:block; }
.mega-menu-header { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--at-red); padding-bottom:1rem; margin-bottom:1.5rem; }
.mega-menu-columns { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:2rem; }

/* Mobile menu */
.mobile-menu-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:1000; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.mobile-menu-overlay.is-open { opacity:1; visibility:visible; }
.mobile-menu-panel { position:fixed; top:0; left:0; width:320px; max-width:85vw; height:100%; background:var(--at-dark-blue); transform:translateX(-100%); transition:transform .3s ease-out; display:flex; flex-direction:column; z-index:1001; }
.mobile-menu-panel.is-open { transform:translateX(0); }
.mobile-menu-header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--at-border-color); }
.mobile-menu-nav ul li a { display:block; padding:.8rem 1rem; color:#fff; font-weight:700; border-bottom:1px solid #1a3e76; }

/* ========================================================================
   Breaking News & Trending
   ======================================================================== */
.breaking-news-banner {
  display:flex; align-items:center; background:var(--at-red); color:#fff;
  border-radius:50px; padding:6px 16px; width:100%; max-width:1200px; margin:0 auto;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.banner-label { font-size:14px; font-weight:700; text-transform:uppercase; padding-right:12px; }
.banner-separator { width:1px; height:16px; background:rgba(255,255,255,.5); margin-right:12px; }
.banner-text { flex-grow:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:500; }
.banner-close-btn { background:none; border:none; color:#fff; font-size:24px; cursor:pointer; opacity:.8; transition:.2s; padding-left:12px; }
.banner-close-btn:hover { opacity:1; }

/* Trending pills */
.trending-topics-container { display:flex; align-items:center; max-width:1270px; margin:auto; position:relative; }
.trending-topics-list-wrapper { overflow:hidden; flex-grow:1; }
.trending-topics-list { display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.trending-topics-list::-webkit-scrollbar { display:none; }
.trending-topic-item a { display:inline-block; padding:5px 15px; font-size:13px; font-weight:600; background:var(--pill-bg); border:1px solid var(--pill-border); border-radius:10px; white-space:nowrap; transition:.2s; }
.trending-topic-item a:hover { background:#e0e0e0; border-color:#c0c0c0; }

/* Arrows */
.scroll-arrow { border:none; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--arrow-bg); transition:.2s; flex-shrink:0; }
.scroll-arrow:hover { opacity:.8; }
.scroll-arrow.disabled { background:var(--arrow-bg-disabled); cursor:default; opacity:.9; }
.scroll-arrow svg { stroke:var(--arrow-color); stroke-width:2; width:14px; height:14px; }

/* ========================================================================
   Main Content & Articles
   ======================================================================== */

   
.site-container { display:grid; grid-template-columns:1fr; max-width:1200px; margin:.5rem auto; padding:0 1rem; gap:1rem; }
@media(min-width:992px){ .site-container { grid-template-columns:1fr 320px; } }

.article-main { background:#fff; border-radius:8px; padding:1.5rem; }
.breadcrumb-nav { font-size:.9rem; color:var(--text-light); margin-bottom:1.5rem; }
.breadcrumb-nav a { color:var(--text-light); }
.main-title { font-size:2.2rem; font-weight:700; color:var(--heading-color); margin-bottom:.75rem; }
.author-and-share-section { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border-color); padding-bottom:1.5rem; margin-bottom:1.5rem; }
.author-byline { display:flex; align-items:center; gap:12px; }
.author-avatar img { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#fff; transition:.2s; }
.share-btn:hover { opacity:.85; }
.share-btn-facebook { background:#1877F2; }
.share-btn-whatsapp { background:#25D366; }
.featured-image-figure { margin-bottom:2rem; border-radius:12px; overflow:hidden; background:#f0f0f0; }
.featured-image-figure img { width:100%; height:auto; }
/* .article-content { font-size:1.15rem; line-height:1.8; color:#333; } */
.article-content h2, .article-content h3 { color:var(--heading-color); margin:2rem 0 1rem; line-height:1.4; }

/* FAQ */
.faq-section { margin:3rem 0; border-top:1px solid var(--border-color); padding-top:2rem; }
.faq-title { font-size:1.75rem; color:var(--heading-color); text-align:center; margin-bottom:1.5rem; }
.faq-item { border-bottom:1px solid var(--border-color); }
.faq-question { position:relative; font-size:1.1rem; font-weight:600; cursor:pointer; padding:1rem 0; }
.faq-question::after { content:'+'; position:absolute; right:5px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--accent-color); transition:.2s; }
details[open] > .faq-question::after { transform:translateY(-50%) rotate(45deg); }
.faq-answer { padding:0 1rem 1.5rem; color:var(--text-light); line-height:1.7; }

/* ========================================================================
   Related & Sidebar Widgets
   ======================================================================== */
.related-posts-section, .sidebar .widget { background:#fff; border-radius:var(--border-radius); box-shadow:0 4px 12px rgba(0,0,0,0.05); margin-bottom:2rem; overflow:hidden; }
.related-posts-section { border-top:1px solid var(--border-color); padding-top:1.2rem; margin-top:2rem; }
.related-posts-title, .widget-title { font-size:1.25rem; font-weight:700; color:var(--heading-color); margin-bottom:1rem; padding-left:.25rem; }
.related-posts-list, .trending-posts-list { display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; }
.related-post-list-item, .trending-posts-list li { display:flex; align-items:center; padding:.25rem 0; border-bottom:1px solid var(--border-color); min-height:56px; transition:.15s; }
.related-post-list-item:hover, .trending-posts-list li:hover { background:#f6fafd; }
.related-post-thumb, .trending-post-thumb img { width:48px; height:48px; border-radius:4px; object-fit:cover; background:#f0f0f0; flex-shrink:0; margin-right:10px; }
.related-post-list-title, .trending-post-title { font-size:1rem; font-weight:500; color:#222; }
.trending-post-title:hover, .trending-post-link:hover .trending-post-title { color:var(--accent-color); }

/* ========================================================================
   Footer
   ======================================================================== */
.site-footer { background:#333; color:#ccc; font-family:'Noto Sans',sans-serif; }
.footer-container { max-width:1270px; margin:auto; padding:2.5rem 1rem; }
.footer-top-section { border-bottom:1px solid #444; padding-bottom:1rem; margin-bottom:1.5rem; text-align:center; }
.footer-top-section ul { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; }
.footer-top-section a { color:#ccc; font-weight:700; font-size:13px; }
.footer-top-section a:hover { color:#fff; }
.footer-widgets-grid { display:grid; gap:2rem; margin-bottom:1.5rem; border-bottom:1px solid #444; padding-bottom:1.5rem; }
@media(min-width:576px){ .footer-widgets-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:992px){ .footer-widgets-grid { grid-template-columns:repeat(4,1fr); } }
.footer-widget .widget-title { color:#fff; text-transform:uppercase; margin-bottom:1rem; }
.footer-widget ul li { margin-bottom:.6rem; }
.footer-widget a { color:#ccc; }
.footer-widget a:hover { color:#fff; }
.footer-bottom-section { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; border-bottom:1px solid #444; padding-bottom:1.5rem; margin-bottom:1.5rem; }
.footer-apps ul, .footer-social ul { display:flex; gap:1rem; }
.footer-copyright { text-align:center; font-size:13px; color:#a0a0a0; }
.footer-copyright a { color:#fff; font-weight:700; }

/* ========================================================================
   DataTables overrides
   ======================================================================== */
.table-compact td, .table-compact th { padding:.4rem .6rem; vertical-align:middle; }