/* ============================================================
         GLOBAL VARIABLES & RESET
         ============================================================ */
      :root {
        --primary-color: #2c5f5b;
        --secondary-color: #49a9a3;
        --dark-blue: #1e7bc0;
        --accent-yellow: #f4e8d3;
        --dark-yellow: #e3a349;
        --sky-blue: #3fb2e8;
        --sky-blue-dark: #2a8bc2;
        --bg-light: #f4f7f6;
        --surface-white: #ffffff;
        --text-main: #1e293b;
        --text-muted: #64748b;
        --radius-lg: 24px;
        --radius-md: 16px;
        --radius-pill: 20px;
        --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --dark-red: red;
        --dark-green: green;
      }

      * {
        font-family:
          "Pyidaungsu",
          system-ui,
          -apple-system,
          "Segoe UI",
          Roboto,
          sans-serif;
      }
      body {
        background-color: var(--bg-light);
      }

      /* ============================================================
         HEADER – NEW two‑row layout with dual logos
         ============================================================ */
      .header-gov {
        background: var(--surface-white);
        box-shadow: 0 4px 12px rgba(0, 20, 30, 0.04);
        border-bottom: 1px solid rgba(0, 40, 60, 0.06);
        padding: 0.6rem 0 0.2rem 0;
      }

      /* ---- Top row: Logo + Text + Logo ---- */
      .header-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: nowrap;
      }

      .header-logo-img {
        width: 120px;
        height: 120px;
        object-fit: contain;
        flex-shrink: 0;
        transition: var(--transition-smooth);
      }

      .header-logo-img-left {
        width: 80px;
        height: 80px;
        object-fit: contain;
        display: none;
      }

      .header-logo-img-right {
        width: 100px;
        height: 100px;
        object-fit: contain;
        flex-shrink: 0;
        transition: var(--transition-smooth);
      }

      .header-text-center {
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
        padding: 0 0.5rem;
      }

      .header-logo-text {
        font-weight: 700;
        line-height: 1.6;
        color: var(--text-main);
        display: block;
      }

      .header-logo-sub {
        font-weight: 700;
        line-height: 1.6;
        color: var(--primary-color);
        display: block;
        margin-top: -2px;
      }

      /* ---- Bottom row: Controls (right‑aligned) ---- */
      .header-bottom-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 0.5rem;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .header-controls {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .header-controls .form-control {
        border-radius: 6px;
        background: var(--bg-light);
        border: 1px solid #d0dbe8;
        font-size: 0.9rem;
        padding-left: 1rem;
        height: 40px;
        width: 220px;
        transition: var(--transition-smooth);
      }

      .header-controls .form-control:focus {
        background: var(--surface-white);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(49, 166, 245, 0.12);
      }

      .header-controls .btn-search {
        border-radius: 6px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: #eef4fa;
        border-color: #d0dbe8;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.75rem;
      }

      .btn-flag {
        display: inline-block;
        line-height: 0;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
        border-radius: 4px;
      }
      .btn-flag:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
      }
      .btn-flag img {
        display: block;
        width: 30px;
        height: 25px;
        object-fit: cover;
        margin: 0;
      }

      .flag-group {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

    

      /* ---- Responsive ---- */
      @media (max-width: 991.98px) {
        .header-logo-img,
        .header-logo-img-right {
          width: 80px;
          height: 80px;
        }

        .header-logo-text,
        .header-logo-sub {
          font-size: 0.95rem;
        }

        .header-controls .form-control {
          width: 200px;
          height: 36px;
          font-size: 0.8rem;
        }
        .header-controls .btn-search {
          height: 36px;
          padding: 0 0.6rem;
        }
        .btn-flag img {
          width: 26px;
          height: 21px;
        }
      }

      @media (max-width: 767.98px) {
        .header-gov {
          padding: 0.4rem 0 0.1rem 0;
        }

        .header-top-row {
          display: flex;
          flex-wrap: nowrap; /* Forces side-by-side */
          justify-content: center; /* Pushes left logo left, text center, right logo right */
          align-items: center;
          gap: 0.5rem;
          padding: 0 4rem;
        }

        .header-logo-img,
        .header-logo-img-right {
          width: 60px;
          height: 60px;
          display: none;
        }

        .header-logo-img-left {
          display: block;
        }

        .header-text-center {
          flex: 0 0 100%;
          order: 3;
          padding: 0.2rem 0;
        }

        .header-logo-img {
          order: 1;
        }
        .header-logo-img-right {
          order: 2;
        }

        .header-logo-text,
        .header-logo-sub {
          font-size: 0.8rem;
          line-height: 1.4;
        }

        .header-bottom-row {
          justify-content: center;
          padding-top: 0.1rem;
        }

        .header-controls {
          justify-content: center;
          gap: 1rem;
          width: 100%;
        }

        .header-controls .form-control {
          width: 200px;
          height: 34px;
          font-size: 0.75rem;
          padding-left: 1rem;
        }
        .header-controls .btn-search {
          height: 34px;
          padding: 0 0.5rem;
          font-size: 0.75rem;
        }
        .btn-flag img {
          width: 22px;
          height: 18px;
        }

        .flag-group {
          gap: 1rem;
        }
      }

      @media (max-width: 480px) {
        .header-top-row {
          display: flex;
          flex-wrap: nowrap; /* Forces side-by-side */
          justify-content: space-between; /* Pushes left logo left, text center, right logo right */
          align-items: center;
          gap: 0.5rem;
        }

        .header-logo-img,
        .header-logo-img-right {
          width: 48px;
          height: 48px;
          display: none;
        }

        .header-logo-img-left {
          width: 60px;
          height: 60px;
          display: block;
        }

        .header-logo-text,
        .header-logo-sub {
          font-size: 0.7rem;
        }

        .header-controls .form-control {
          width: 150px;
          height: 30px;
          font-size: 0.7rem;
        }
        .header-controls .btn-search {
          height: 30px;
          padding: 0 0.4rem;
          font-size: 0.7rem;
        }
        .btn-flag img {
          width: 18px;
          height: 15px;
        }

        .header-controls {
          gap: 1rem;
        }
      }

      /* ============================================================
         BREADCRUMB
         ============================================================ */

      /* ============================================================
         NAVBAR — with multi‑level dropdown support
         ============================================================ */
      .nav-primary {
        background: var(--primary-color);
        border-bottom: 5px solid var(--dark-yellow);
        padding: 0.5rem 0;
        margin-top: 0;
      }
      .nav-primary .navbar-nav .nav-link {
        font-weight: 800;
        color: var(--surface-white) !important;
        padding: 0.3rem 0.5rem;
        font-size: 0.9rem;
        border-radius: 6px;
        transition: var(--transition-smooth);
        position: relative;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
      }
      .nav-primary .navbar-nav .nav-link:hover,
      .nav-primary .navbar-nav .nav-link:focus {
        border-radius: 0px !important;
        border-bottom-color: var(--dark-yellow);
      }

      /* ---- Dropdown toggles ---- */
      .nav-primary .dropdown-toggle::after {
        display: none;
      }
      .nav-primary .has-sub .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.4rem;
        vertical-align: middle;
        content: "▾";
        font-size: 0.7rem;
        opacity: 0.7;
        border: none;
        color: #b0cfdd;
      }

      /* ---- Dropdown menus (level 1) ---- */
      .nav-primary .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition:
          opacity 0.15s ease,
          transform 0.15s ease,
          visibility 0s linear 0.15s;
        margin-top: 0.2rem;
        border: 1px solid #e9edf2;
        border-radius: 6px;
        box-shadow: 0 12px 32px rgba(0, 20, 30, 0.1);
        padding: 0.3rem 0;
        background: var(--surface-white);
        min-width: 220px;
      }
      .nav-primary .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
      }
      .nav-primary .dropdown .dropdown-item {
        padding: 0.5rem 1rem;
        font-weight: 550;
        color: var(--secondary-color);
        font-size: 0.85rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      .nav-primary .dropdown .dropdown-item:hover {
        background: var(--bg-light);
        color: var(--primary-color);
      }

      /* ---- Sub‑menu caret (▶) ---- */
      .dropdown-submenu .dropdown-item::after {
        font-size: 0.8rem;
        opacity: 0.5;
        margin-left: auto;
        transition: var(--transition-smooth);
      }
      .dropdown-submenu .dropdown-item:hover::after {
        opacity: 1;
        transform: translateX(2px);
      }

      /* ---- Sub‑menu (level 2+) ---- */
      .dropdown-submenu {
        position: relative;
      }

      .dropdown-submenu .dropdown-menu {
        position: static !important;
        margin-left: 1.2rem !important;
        margin-top: 2px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        border-left: 2px solid var(--dark-yellow);
        background: rgba(255, 255, 255, 0.06);
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
      }
      /* Hover to open sub‑menu */
      .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
      }

      /* ---- Mobile / collapsed state ---- */
      @media (max-width: 767.98px) {
        .nav-primary .navbar-collapse {
          background: var(--primary-color);
          padding: 0.5rem 0;
          border-radius: 0 0 8px 8px;
        }
        .nav-primary .navbar-nav .nav-link {
          padding: 0.5rem 0.8rem;
          font-size: 0.9rem;
          border-bottom: none;
          color: var(--surface-white) !important;
        }
        .nav-primary .navbar-nav .nav-link:hover {
          border-bottom: none;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 4px;
        }
        /* On mobile: sub‑menus slide down, not to the right */
        .dropdown-submenu .dropdown-menu {
          position: static !important;
          margin-left: 1.2rem !important;
          margin-top: 2px !important;
          border-radius: 4px !important;
          box-shadow: none !important;
          border-left: 2px solid var(--dark-yellow);
          background: rgba(255, 255, 255, 0.06);
          transform: none !important;
          opacity: 1 !important;
          visibility: visible !important;
          display: none;
        }
        .dropdown-submenu .dropdown-menu .dropdown-item {
          color: var(--dark-yellow) !important;
          padding: 0.4rem 0.8rem;
          font-size: 0.85rem;
        }
        .dropdown-submenu .dropdown-menu .dropdown-item:hover {
          background: rgba(255, 255, 255, 0.1);
          color: var(--primary-color) !important;
        }
        /* Show sub‑menu when parent has .show */
        .dropdown-submenu.show > .dropdown-menu {
          display: block !important;
        }
        .dropdown-submenu .dropdown-item::after {
          display: none;
        }
        /* Toggle caret for mobile sub‑menu items */
        .dropdown-submenu > .dropdown-item {
          cursor: pointer;
        }
        .dropdown-submenu > .dropdown-item::after {
          display: none;
        }
        .dropdown-submenu > .dropdown-item .sub-caret {
          display: inline-block;
          margin-left: 0.4rem;
          font-size: 0.7rem;
          opacity: 0.7;
          transition: transform 0.2s ease;
        }
        .dropdown-submenu.show > .dropdown-item .sub-caret {
          transform: rotate(90deg);
        }
      }

      /* ---- Navbar toggler ---- */
      .nav-primary .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--surface-white);
        margin-right: auto;
      }
      .nav-primary .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }

      /* ---- Sticky animation ---- */
      .nav-primary {
        animation: slideDownFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .nav-primary.is-stuck {
        transition:
          opacity 0.6s ease,
          transform 0.6s ease,
          visibility 0.6s ease !important;
      }
      @keyframes slideDownFadeIn {
        0% {
          opacity: 0;
          transform: translateY(-100%);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ============================================================
         MARQUEE
         ============================================================ */
      .alert-marquee {
        background: var(--primary-color);
        color: var(--surface-white);
        padding: 0px 20px;
        border: none;
        margin-top: 0.5rem;
        margin-bottom: 0;
        font-size: 0.9rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }
      .alert-marquee .marquee-wrapper {
        display: flex;
        align-items: stretch;
        width: 100%;
        overflow: hidden;
      }
      .alert-marquee .marquee-scroll-area {
        flex-grow: 1;
        overflow: hidden;
        padding: 0.5rem 0;
        display: flex;
        align-items: center;
      }
      .alert-marquee .marquee-content {
        display: flex;
        align-items: center;
        gap: 2rem;
        white-space: nowrap;
        padding-left: 100%;
        animation: scrollMarquee 50s linear infinite;
      }
      .alert-marquee .marquee-scroll-area:hover .marquee-content {
        animation-play-state: paused;
      }
      .alert-marquee .bi-megaphone {
        font-size: 1.2rem;
        margin-right: 0.5rem;
        color: var(--dark-yellow);
      }
      .alert-marquee .badge-urgent {
        background: var(--dark-yellow);
        font-weight: 600;
        border-radius: var(--radius-pill);
        padding: 0.2rem 0.9rem;
        font-size: 0.7rem;
        letter-spacing: 0.3px;
        color: var(--surface-white);
        margin-right: 0.5rem;
      }
      @keyframes scrollMarquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

      /* ==================================================== */
      /*  SECTIONS & TITLES                                    */
      /* ==================================================== */
      .container-news,
      .container-services {
        padding-top: 10px;
        padding-bottom: 20px;
      }
      .section-title {
        color: var(--text-main);
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 20px;
        display: inline-block;
        border-bottom: 3px solid var(--dark-yellow);
        padding-bottom: 4px;
      }
      .video-section-container {
        margin-top: 1rem;
      }
      .video-section-title {
        color: var(--text-main);
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 10px;
        display: inline-block;
        padding-bottom: 4px;
        border-bottom: 3px solid var(--dark-yellow);
      }
      .video-section-header {
        text-align: center;
        margin-bottom: 40px;
      }
      .video-section-subtitle {
        font-size: 1rem;
        color: var(--text-muted);
        margin-bottom: 15px;
      }

      /* ==================================================== */
      /*  NEWS CARDS                                           */
      /* ==================================================== */
      .card-news {
        background: var(--surface-white);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .card-news .img-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .card-news .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease-in-out;
      }
      .card-news:hover .img-wrapper img {
        cursor: pointer;
        transform: scale(1.08);
      }
      .card-news .aspect-large {
        aspect-ratio: 16 / 10.5;
      }
      .card-news .aspect-medium {
        aspect-ratio: 16 / 9;
      }
      .card-news .aspect-square {
        aspect-ratio: 1 / 1;
      }

      /* Text Overlay */
      .card-news .info-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.95) 0%,
          rgba(0, 0, 0, 0.6) 40%,
          transparent 100%
        );
        color: var(--surface-white);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .card-news .meta-tags {
        font-size: 0.85rem;
        margin-bottom: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        color: var(--surface-white);
      }
      .card-news .meta-tags i {
        margin-right: 5px;
      }
      .card-news .news-title {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .card-news .news-title.small-text {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
      }
      .card-news .read-more-btn {
        margin-top: 1.5rem;
        color: var(--surface-white);
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 600;
        transition: var(--transition-smooth);
        display: inline-block;
      }
      .card-news .read-more-btn:hover {
        color: var(--dark-yellow);
      }
      .card-news .read-more-btn i {
        font-size: 0.75rem;
        margin-left: 5px;
      }

      .bg-yellow-custom {
        background-color: var(--dark-yellow);
      }

      .bg-color-custom {
        background-color: var(--secondary-color);
      }

      .bg-green-custom {
        background-color: var(--dark-green);
      }

      /* Mobile Responsiveness */
      @media (max-width: 991px) {
        .card-news .aspect-large,
        .card-news .aspect-medium,
        .card-news .aspect-square {
          aspect-ratio: 16 / 9;
        }
        .right-top-wrapper {
          margin-bottom: 20px;
        }
      }

      /* ==================================================== */
      /*  NEWS CARD WITH DATE BADGE                           */
      /* ==================================================== */
      .card-news-featured {
        border: none;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: var(--surface-white);
      }
      .card-news-featured .img-wrapper {
        position: relative;
        height: 220px;
        overflow: hidden;
      }
      .card-news-featured .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease-in-out;
      }

      .card-news-featured:hover .img-wrapper img {
        cursor: pointer;
        transform: scale(1.08);
      }
      .card-news-featured .date-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        text-align: center;
        color: var(--surface-white);
        z-index: 2;
      }
      .card-news-featured .date-badge .day {
        background-color: var(--dark-yellow);
        font-size: 1.8rem;
        font-weight: 700;
        padding: 8px 0 2px 0;
        display: block;
      }
      .card-news-featured .date-badge .month {
        background-color: #555555;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        padding: 4px 0 8px 0;
        display: block;
      }
      .card-news-featured .card-body-custom {
        padding: 20px;
      }
      .card-news-featured .meta-info {
        display: flex;
        align-items: center;
        gap: 15px;
        color: var(--dark-yellow);
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 12px;
      }
      .card-news-featured .meta-info i {
        margin-right: 5px;
      }
      .card-news-featured .news-title-text {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-main);
        line-height: 1.5;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .card-news-featured .news-body-text {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .card-news-featured .read-more-link {
        color: var(--dark-yellow);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .card-news-featured .read-more-link:hover {
        color: var(--primary-color);
      }

      /* ==================================================== */
      /*  SERVICE CARDS (Yellow/Green/Red)                     */
      /* ==================================================== */
      .card-service {
        height: 100%;
        padding: 20px 20px;
        color: var(--surface-white);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 6px;
        transition: var(--transition-smooth);
      }
      .card-service:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        z-index: 10;
      }
      .card-service .icon-wrapper {
        font-size: 4rem;
        margin-bottom: 20px;
        line-height: 1;
      }
      .card-service .service-title {
        font-weight: 800;
        font-size: 1.5rem;
        margin-bottom: 15px;
      }
      .card-service .service-desc {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 25px;
        opacity: 0.95;
      }
      .card-service .btn-read-more {
        margin-top: auto;
        background: transparent;
        color: var(--surface-white);
        border: 2px solid var(--surface-white);
        border-radius: 10px;
        padding: 5px 20px;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        text-decoration: none;
        transition: var(--transition-smooth);
      }
      .card-service .btn-read-more:hover {
        cursor: pointer;
        background: var(--surface-white);
        color: var(--text-main);
      }
      @media (max-width: 768px) {
        .card-service {
          padding: 30px 20px;
        }
        .card-service:hover {
          transform: translateY(-3px);
        }
      }

      /* ==================================================== */
      /*  VIDEO CARDS                                          */
      /* ==================================================== */
      .card-video {
        background-color: var(--surface-white);
        border: 1px solid #e9ecef;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        height: 100%;
        position: relative;
        transition: var(--transition-smooth);
      }
      .card-video:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      }
      .card-video .video-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: #000;
        overflow: hidden;
      }
      .card-video .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .card-video .flag-badge {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        background-color: var(--surface-white);
        border-radius: 50%;
        border: 3px solid var(--surface-white);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        overflow: hidden;
      }
      .card-video .flag-badge img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
      .card-video .video-card-body {
        padding: 35px 20px 25px 20px;
        text-align: center;
      }
      .card-video .video-description {
        font-size: 0.8rem;
        line-height: 1.6;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      

      /* ==================================================== */
      /*  DIVIDER & ပိုမိုဖတ်ရှုရန် ... BUTTONS                          */
      /* ==================================================== */
      .divider-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }
      .divider-line {
        width: 60px;
        height: 3px;
        background-color: var(--dark-yellow);
      }
      .divider-icon {
        padding: 0 10px;
        color: var(--dark-yellow);
        font-size: 1.2rem;
      }

      .icon-divider {
        position: relative;
        border-top: 2px solid #e1c157;
        height: 0;
        margin: 3rem 0;
        text-align: center;
        width: 200px;
        margin: auto;
      }

      .icon-divider::after {
        content: "◆";
        /* Can be replaced with an inline SVG or FontAwesome character */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        /* Must match parent section container background color */
        padding: 0 0.1rem;
        color: #e1c157;
        font-size: 1.25rem;
      }

      .gradient-divider {
        border: none;
        height: 3px;
        /* Fades out smoothly on both left and right sides */
        background: linear-gradient(
          to right,
          transparent,
          var(--dark-yellow),
          transparent
        );
        margin: 1rem 0;
      }

      .divider--shimmer {
        border: none;
        height: 3px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          transparent 30%,
          #fa709a 50%,
          #fee140 70%,
          transparent 70%,
          transparent 100%
        );
        margin: 0;
        border-radius: 4px;
        background-size: 200% 100%;
        animation: shimmerMove 3s infinite linear;
      }

      @keyframes shimmerMove {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }

      .read-more-wrapper {
        text-align: center;
        margin-top: 40px;
      }
      .btn-read-more-pill {
        display: inline-block;
        padding: 5px 15px;
        border: 2px solid var(--dark-yellow);
        border-radius: var(--radius-pill);
        color: var(--dark-yellow);
        background-color: transparent;
        font-weight: 500;
        font-size: 0.875rem;
        text-transform: uppercase;
        text-decoration: none;
        transition: var(--transition-smooth);
      }
      .btn-read-more-pill:hover {
        background-color: var(--dark-yellow);
        color: var(--surface-white);
      }
      .row-gap-custom {
        --bs-gutter-y: 50px;
      }

      /* ==================================================== */
      /*  ANNOUNCEMENTS, TENDERS & ADS                         */
      /* ==================================================== */
      .section-ads {
        max-width: 1250px;
        margin: 0 auto;
        padding: 40px 15px;
      }
      .col-header {
        text-align: center;
        margin-bottom: 25px;
      }
      .col-title {
        font-weight: 700;
        font-size: 1.5rem;
        color: #222;
        margin-bottom: 10px;
      }

      .list-news-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e9ecef;
      }
      .list-news-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
      .list-news-item .thumb {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid #ddd;
      }
      .list-news-item .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .list-news-item .content {
        flex-grow: 1;
      }
      .list-news-item .headline {
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.4;
        color: var(--text-main);
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
       .list-news-item .description {
        font-weight: 500;
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--text-main);
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .list-news-item .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.75rem;
        color: var(--dark-yellow);
        font-weight: 600;
      }
      .list-news-item .meta i {
        margin-right: 3px;
      }


      
.file-badge {
   
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.pdf-badge {
    background: #e74c3c;
}
.image-badge {
    background: #2ecc71;
}

      .ad-banner-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: var(--surface-white);
      }
      .ad-banner-wrapper .ad-border-box {
        width: 100%;
        padding: 20px;
        border: 6px solid var(--sky-blue);
        background-color: var(--surface-white);
        position: relative;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      }
      .ad-banner-wrapper .ad-gold-frame {
        border: 3px solid #e6c265;
        padding: 30px 20px;
        background: #fcfcfc;
        text-align: center;
        position: relative;
      }
      .ad-banner-wrapper .ad-gold-frame::before,
      .ad-banner-wrapper .ad-gold-frame::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border: 4px solid #e6c265;
        pointer-events: none;
      }
      .ad-banner-wrapper .ad-gold-frame::before {
        top: -17px;
        left: -17px;
        border-right: none;
        border-bottom: none;
      }
      .ad-banner-wrapper .ad-gold-frame::after {
        bottom: -17px;
        right: -17px;
        border-left: none;
        border-top: none;
      }
      .ad-banner-wrapper .ad-text {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.6;
      }
      @media (max-width: 991px) {
        .ad-banner-wrapper {
          padding: 20px 0;
          margin-top: 30px;
        }
      }

      /* ==================================================== */
      /*  GALLERY CAROUSEL                                     */
      /* ==================================================== */
      .section-gallery {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 15px;
        position: relative;
      }
      .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 15px;
      }
      .gallery-header-content {
        text-align: center;
        flex-grow: 1;
      }

      .gallery-section-title {
        color: var(--text-main);
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 10px;
        display: inline-block;
        padding-bottom: 4px;
        border-bottom: 3px solid var(--dark-yellow);
      }
      .gallery-section-header {
        text-align: center;
        margin-bottom: 40px;
      }
      .gallery-section-subtitle {
        font-size: 1rem;
        color: var(--text-muted);
        margin-bottom: 15px;
      }

      #photoCarousel {
        position: relative;
      }
      .carousel-control-prev,
      .carousel-control-next {
        width: 48px;
        height: 48px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
      }
      .carousel-control-prev:hover,
      .carousel-control-next:hover {
        background-color: rgba(0, 0, 0, 0.7);
      }
      .carousel-control-prev {
        left: 5px;
      }
      .carousel-control-next {
        right: 5px;
      }
      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-image: none;
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        color: var(--surface-white);
        width: auto;
        height: auto;
      }
      .carousel-control-prev-icon::before {
        content: "\f284";
      }
      .carousel-control-next-icon::before {
        content: "\f285";
      }

      .card-gallery {
        background: var(--surface-white);
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        transition: var(--transition-smooth);
      }
      .card-gallery:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      }
      .card-gallery .img-wrapper {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
      }
      .card-gallery .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .card-gallery .date-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: 55px;
        text-align: center;
        color: var(--surface-white);
        z-index: 2;
      }
      .card-gallery .date-badge .day {
        background-color: var(--dark-yellow);
        font-size: 1.6rem;
        font-weight: 700;
        padding: 6px 0 2px 0;
        display: block;
      }
      .card-gallery .date-badge .month {
        background-color: #555555;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        padding: 4px 0 8px 0;
        display: block;
      }
      .card-gallery .card-body {
        padding: 20px;
      }
      .card-gallery .headline {
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--text-main);
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .card-gallery .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--dark-yellow);
      }
      .card-gallery .meta i {
        margin-right: 5px;
      }

      @media (max-width: 991px) {
        .carousel-control-prev {
          left: 10px;
        }
        .carousel-control-next {
          right: 10px;
        }
      }
      @media (max-width: 768px) {
        .carousel-control-prev,
        .carousel-control-next {
          width: 35px;
          height: 35px;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
          font-size: 1.2rem;
        }
        .carousel-control-prev {
          left: 5px;
        }
        .carousel-control-next {
          right: 5px;
        }
      }

      /* ============================================================
         FOOTER (condensed for brevity – keep your existing styles)
         ============================================================ */
      .site-footer {
        background-color: var(--primary-color);
        color: var(--surface-white);
        padding: 10px 0 30px 0;
      }
      .footer-bottom-bar {
        background-color: #2d2f33;
        color: #bbbbbb;
        text-align: center;
        padding: 18px 0;
        font-size: 0.9rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .footer-title {
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 25px;
        color: var(--dark-yellow);
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
        font-size: 0.95rem;
        line-height: 1.5;
      }
      .footer-contact-item i {
        font-size: 1.2rem;
        margin-top: 3px;
      }
      .footer-visit-count {
        margin-top: 25px;
        font-size: 0.95rem;
        display: block;
      }
      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .footer-links li {
        margin-bottom: 12px;
      }
      .footer-links a {
        color: var(--surface-white);
        text-decoration: none;
        font-size: 0.95rem;
        transition: var(--transition-smooth);
        display: inline-block;
      }
      .footer-links a:hover {
        text-decoration: underline;
        transform: translateX(4px);
      }
      .footer-map-wrapper {
        position: relative;
        width: 100%;
        padding-top: 75%;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      }
      .footer-map-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
      .footer-social {
        display: flex;
        justify-content: center;
        gap: 15px;
        padding: 20px 0 20px 0;
      }
      .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--dark-yellow);
        color: var(--surface-white);
        border-radius: 10%;
        text-decoration: none;
        font-size: 1.2rem;
        transition: var(--transition-smooth);
      }
      .footer-social a:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }
      @media (max-width: 991px) {
        .footer-title {
          margin-top: 30px;
        }
        .col-lg-3:first-child .footer-title {
          margin-top: 0;
        }
      }

      /* ============================================================
         SCROLL TO TOP
         ============================================================ */
      #scrollToTopBtn {
        position: fixed;
        bottom: 3rem;
        right: 5rem;
        z-index: 9999;
        width: 3rem;
        height: 3rem;
        background-color: var(--primary-color);
        color: var(--surface-white);
        border: none;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition-smooth);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
      }
      #scrollToTopBtn:hover {
        background-color: var(--dark-yellow);
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      }
      #scrollToTopBtn.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      /* ============================================================
         MOBILE HEADER overrides
         ============================================================ */
      @media (max-width: 767.98px) {
        .nav-primary .navbar-toggler {
          margin-right: auto;
          margin-left: 0;
        }
        .nav-primary .navbar-collapse {
          text-align: left;
        }
        .nav-primary .navbar-nav .nav-link {
          color: var(--surface-white) !important;
        }
        .alert-marquee {
          margin-top: 0.8rem;
        }
      }
      @media (max-width: 576px) {
        .nav-primary .navbar-nav .nav-link {
          padding: 0.5rem 0.8rem;
          font-size: 0.9rem;
        }
        .alert-marquee .marquee-content {
          animation-duration: 22s;
        }
      }
      @media (min-width: 768px) {
        .nav-primary .dropdown:hover > .dropdown-menu {
          display: block !important;
        }
        .nav-primary .dropdown:hover > .dropdown-menu.show {
          display: block !important;
        }
      }

      .card-gallery .btn-read-more {
        margin-top: auto;
        background: transparent;
        color: var(--dark-yellow);
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        text-decoration: none;
        transition: var(--transition-smooth);
      }

      .card-gallery .btn-read-more:hover {
        cursor: pointer;
        background: var(--surface-white);
        color: var(--primary-color);
      }

        /* ============================================================
        Breadcrumb
         ============================================================ */

      .custom-breadcrumb {
        background: transparent;
        padding: 0.5rem 0 0.2rem 0;
        margin-bottom: 0.2rem;
        font-size: 0.85rem;
        font-weight: 600;
      }
      .custom-breadcrumb .breadcrumb-item a {
        color: var(--text-muted);
        text-decoration: none;
        transition: var(--transition-smooth);
      }
      .custom-breadcrumb .breadcrumb-item a:hover {
        color: var(--dark-yellow);
        text-decoration: underline;
      }
      .custom-breadcrumb .breadcrumb-item.active {
        color: var(--dark-yellow);
        font-weight: 600;
      }
      .custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: var(--text-muted);
        font-weight: 300;
        padding: 0 0.5rem;
      }

       /* ============================================================
        PAGINATION LINK
         ============================================================ */


      .pagination .page-link {
        color: var(--text-main);
        border: 1px solid #dee2e6;
        transition: var(--transition-smooth);
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .pagination .page-link:hover {
        background-color: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
      }
      .pagination .page-item.active .page-link {
        background-color: var(--dark-yellow);
        border-color: var(--dark-yellow);
        color: #fff;
      }
      .pagination .page-item.disabled .page-link {
        opacity: 0.5;
        pointer-events: none;
      }

       @media (max-width: 768px) {
          .pagination .page-link {
            flex-direction: column;   /* now align-items works horizontally */
            align-items: stretch; 
        }
      }




       /* ============================================================
        NEWS LIST
         ============================================================ */

      .news-list-title {
        color: var(--text-main);
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 20px;
        display: inline-block;
        border-bottom: 3px solid var(--dark-yellow);
        padding-bottom: 4px;
      }

      @media (max-width: 576px) {
        .news-list-title {
          font-size: 1.5rem;
        }
        .custom-breadcrumb {
          font-size: 0.75rem;
        }
      }

      /* ==================================================== */
      /*  MAIN FEATURED NEWS (col-8)                          */
      /* ==================================================== */
      /* ==================================================== */
      /*  FEATURED ARTICLE CARD (col-8)                       */
      /* ==================================================== */
      .featured-article-card {
        background: var(--surface-white);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        height: 100%;
      }

      .featured-article-card .featured-img-wrapper {
        position: relative;
        width: 95%;
        margin: 20px auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #e9ecef;
      }

      .featured-article-card .featured-img-wrapper img {
        width: 80%;
        height: 10%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .featured-article-card:hover .featured-img-wrapper img {
        transform: scale(1.04);
      }

      .featured-article-card .featured-body {
        padding: 1.8rem 2rem 2rem 2rem;
      }

      .featured-article-card .featured-meta {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        font-size: 0.8rem;
        color: var(--dark-yellow);
        font-weight: 600;
        margin-bottom: 0.6rem;
        flex-wrap: wrap;
      }

      .featured-article-card .featured-meta i {
        margin-right: 4px;
      }

      .featured-article-card .featured-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.4;
        margin-bottom: 0.8rem;
      }

      .featured-article-card .featured-title a {
        color: var(--text-main);
        text-decoration: none;
        transition: var(--transition-smooth);
      }

      .featured-article-card .featured-title a:hover {
        color: var(--dark-yellow);
      }

      /* Article text styling */
      .featured-article-text {
        font-size: 0.95rem;
        line-height: 1.8;
        color: var(--text-main);
        margin-bottom: 1.2rem;
      }

      .featured-article-text p {
        margin-bottom: 1rem;
      }

      .featured-article-text p:last-child {
        margin-bottom: 0;
      }

      .featured-article-card .featured-read-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--dark-yellow);
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        transition: var(--transition-smooth);
        margin-top: 0.5rem;
      }

      .featured-article-card .featured-read-more:hover {
        color: var(--primary-color);
        gap: 10px;
      }

      /* Responsive */
      @media (max-width: 991px) {
        .featured-article-card .featured-body {
          padding: 1.2rem;
        }
        .featured-article-card .featured-title {
          font-size: 1.2rem;
        }
        .featured-article-text {
          font-size: 0.9rem;
        }
      }

      @media (max-width: 768px) {
        .featured-article-card .featured-img-wrapper {
          aspect-ratio: 16 / 10;
        }
        .featured-article-card .featured-title {
          font-size: 1rem;
        }
        .featured-article-text {
          font-size: 0.85rem;
          line-height: 1.7;
        }
      }

      #featuredCarousel .carousel-control-prev,
      #featuredCarousel .carousel-control-next {
        width: 48px;
        height: 48px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
      }
      #featuredCarousel .carousel-control-prev {
        left: 10px;
      }
      #featuredCarousel .carousel-control-next {
        right: 10px;
      }
      #featuredCarousel .carousel-control-prev-icon,
      #featuredCarousel .carousel-control-next-icon {
        background-image: none;
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        color: #fff;
        width: auto;
        height: auto;
      }
      #featuredCarousel .carousel-control-prev-icon::before {
        content: "\f284";
      }
      #featuredCarousel .carousel-control-next-icon::before {
        content: "\f285";
      }

      /* ==================================================== */
      /*  RELATED NEWS SIDEBAR (col-4)                        */
      /* ==================================================== */
      .related-news-section {
        background: var(--surface-white);
        border-radius: 8px;
        padding: 1.5rem 1.5rem 0.8rem 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        height: 100%;
      }

      .related-news-section .related-header {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
        border-bottom: 3px solid var(--dark-yellow);
        display: inline-block;
      }

      .related-news-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.8rem 0;
        border-bottom: 1px solid #f0f2f5;
        transition: var(--transition-smooth);
        cursor: pointer;
      }

      .related-news-item:last-child {
        border-bottom: none;
      }

      .related-news-item:hover {
        background: #fafbfc;
        margin: 0 -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-radius: 6px;
      }

      .related-news-item .related-thumb {
        flex-shrink: 0;
        width: 75px;
        height: 75px;
        border-radius: 6px;
        overflow: hidden;
        background: #e9ecef;
        border: 1px solid #e9ecef;
      }

      .related-news-item .related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .related-news-item:hover .related-thumb img {
        transform: scale(1.06);
      }

      .related-news-item .related-content {
        flex: 1;
        min-width: 0;
      }

      .related-news-item .related-title {
        padding: 1rem 1rem;
        font-size: 0.8rem;
        font-weight: 600;
        /* line-height: 1.5; */
        color: var(--text-main);
        margin-bottom: 0.3rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: var(--transition-smooth);
      }

      .related-news-item:hover .related-title {
        color: var(--dark-yellow);
      }

      .related-news-item .related-title a {
        color: inherit;
        text-decoration: none;
      }

      .related-news-item .related-date {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .related-news-item .related-date i {
        font-size: 0.65rem;
        color: var(--dark-yellow);
      }

      @media (max-width: 991px) {
        .featured-news-card .featured-body {
          padding: 1.2rem;
        }
        .featured-news-card .featured-title {
          font-size: 1.2rem;
        }
        .related-news-item .related-thumb {
          width: 60px;
          height: 60px;
        }
        .related-news-item .related-title {
          font-size: 0.8rem;
        }
      }

      @media (max-width: 768px) {
        .featured-news-card .featured-img-wrapper {
          aspect-ratio: 16 / 10;
        }
        .featured-news-card .featured-title {
          font-size: 1rem;
        }
        .featured-news-card .featured-excerpt {
          font-size: 0.85rem;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .related-news-section {
          margin-top: 1.5rem;
        }
        .other-news-title {
          font-size: 1.5rem;
        }
        .custom-breadcrumb {
          font-size: 0.75rem;
        }
      }

      @media (max-width: 576px) {
        .related-news-item .related-thumb {
          width: 55px;
          height: 55px;
        }
        .related-news-item .related-title {
          font-size: 0.75rem;
        }
        .date-diagonal {
          width: 60px;
          height: 60px;
        }
        .date-diagonal .diag-badge {
          font-size: 0.55rem;
          top: 10px;
          right: -18px;
          width: 100px;
        }
        .date-diagonal .diag-badge .day-diag {
          font-size: 0.75rem;
        }
      }

      /* ==================================================== */
      /*  DATE DIAGONAL BADGE (for featured image)             */
      /* ==================================================== */
      .date-diagonal {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;
      }
      .date-diagonal .diag-badge {
        position: absolute;
        top: 14px;
        right: -22px;
        width: 120px;
        background: var(--dark-yellow);
        color: #fff;
        text-align: center;
        padding: 0.15rem 0;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transform: rotate(45deg);
        box-shadow: 0 4px 12px rgba(15, 52, 96, 0.2);
      }
      .date-diagonal .diag-badge .day-diag {
        font-size: 0.9rem;
        font-weight: 800;
        margin-right: 0.2rem;
      }

      /* ============================================================
         ARTICLE
         ============================================================ */

      .article-body {
        font-size: 1.05rem;
        line-height: 1.9;
        color: var(--text-main);
      }

      .article-body p {
        margin-bottom: 1.25rem;
      }

      /* .article-body p:first-of-type::first-letter {
        font-size: 3.2rem;
        font-weight: 700;
        float: left;
        line-height: 1;
        margin-right: 0.5rem;
        color: var(--dark-yellow);
      } */

      .article-body .section-subheading {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-top: 1.8rem;
        margin-bottom: 0.8rem;
        border-left: 4px solid var(--dark-yellow);
        padding-left: 1rem;
      }

      .article-body .pull-quote {
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.6;
        color: var(--text-main);
        padding: 1.2rem 2rem;
        margin: 1.5rem 0;
        background: #f8f6f0;
        border-radius: 8px;
        border-left: 5px solid var(--dark-yellow);
        position: relative;
      }
      .article-body .pull-quote .attribution {
        display: block;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted);
        margin-top: 0.5rem;
      }

      .article-divider {
        text-align: center;
        color: var(--dark-yellow);
        font-size: 1.5rem;
        letter-spacing: 0.5rem;
        margin: 2rem 0;
        opacity: 0.5;
      }

      .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 2px solid #e9edf2;
      }
      .article-tags .tag {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: #eef2f5;
        color: var(--text-muted);
        padding: 0.25rem 1rem;
        border-radius: 20px;
        text-decoration: none;
        transition: var(--transition-smooth);
      }
      .article-tags .tag:hover {
        background: var(--dark-yellow);
        color: var(--surface-white);
      }

      .article-share {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 2px solid #e9edf2;
      }
      .article-share .share-label {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--dark-yellow);
      }
      .article-share .share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #eef2f5;
        color: var(--secondary-color);
        text-decoration: none;
        transition: var(--transition-smooth);
        font-size: 0.9rem;
      }
      .article-share .share-btn:hover {
        background: var(--dark-yellow);
        color: var(--surface-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      /* ============================================================
         RESPONSIVE — ARTICLE
         ============================================================ */
      @media (max-width: 768px) {
        .article-header .article-title {
          font-size: 1.6rem;
        }
        .article-body {
          font-size: 0.95rem;
          line-height: 1.8;
        }
        /* .article-body p:first-of-type::first-letter {
          font-size: 2.4rem;
        } */
        .article-body .section-subheading {
          font-size: 1.1rem;
        }
        .article-body .pull-quote {
          font-size: 1rem;
          padding: 1rem 1.2rem;
        }
        .article-container {
          padding: 0 1rem;
        }
      }

      @media (max-width: 480px) {
        .article-header .article-title {
          font-size: 1.3rem;
        }
        .article-header .article-meta {
          gap: 0.8rem;
          font-size: 0.75rem;
        }
        .article-body {
          font-size: 0.9rem;
        }
        /* .article-body p:first-of-type::first-letter {
          font-size: 2rem;
        } */
        .article-share {
          flex-wrap: wrap;
          gap: 0.6rem;
        }
      }


      /* ─── table container ─── */
      .table-wrap {
        background: #ffffff;
        border-radius: 20px;
        padding: 1.5rem 1.25rem 1.75rem 1.25rem;
        box-shadow: 0 8px 30px rgba(0, 20, 40, 0.08);
        border: 1px solid #eef3f8;
        transition: box-shadow 0.3s ease;
      }

      .table-wrap:hover {
        box-shadow: 0 14px 45px rgba(0, 20, 40, 0.12);
      }

      /* ─── table header decoration ─── */
      .table-header-custom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e9eff5;
      }

      .table-header-custom h5 {
        font-weight: 600;
        color: #1a3b5c;
        letter-spacing: -0.2px;
        margin: 0;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .table-header-custom h5 i {
        color: #4a7eb5;
        font-size: 1.3rem;
      }

      .table-header-custom .entry-count {
        font-size: 0.8rem;
        background: #eef4fa;
        color: #2c577a;
        padding: 0.25rem 1rem;
        border-radius: 30px;
        font-weight: 500;
        border: 1px solid #dae5f0;
      }

      /* ─── table ─── */
      .table-custom {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0 6px;
        width: 100%;
      }

      .table-custom thead th {
        background-color: var(--primary-color);
        color: var(--dark-yellow);
        font-weight: 600;
        font-size: 0.8rem;
        padding: 1rem 1rem;
        border: none;
        border-bottom: 2px solid #e2ebf3;
        white-space: nowrap;
      }

      .table-custom tbody tr {
        background: #ffffff;
        border-radius: 12px;
        transition: all 0.2s ease;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
      }

      .table-custom tbody tr:hover {
        background: #f6faff;
        box-shadow: 0 4px 16px rgba(26, 67, 113, 0.07);
      }

      .table-custom tbody td {
        padding: 0.9rem 1rem;
        border: none;
        vertical-align: middle;
        color: #1e3b57;
        font-size: 0.8rem;
        line-height: 1.5;
      }

      .table-custom tbody td:first-child {
        padding-left: 0.5rem;
        font-weight: 500;
        color: #4a7eb5;
        width: 50px;
        text-align: center;
      }

      /* ─── title column ─── */
      .table-custom tbody td:nth-child(2) {
        font-weight: 500;
        color: var(--text-main);
        min-width: 180px;
      }

      /* ─── description column ─── */
      .table-custom tbody td:nth-child(3) {
        color: #3f5f7a;
        font-size: 0.9rem;
        max-width: 320px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ─── action column (eye button) ─── */
      .table-custom tbody td:last-child {
        text-align: center;
        width: 90px;
        padding: 0.5rem 0.5rem;
      }

      .btn-eye {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: transparent;
        color: var(--surface-white);
        border: 1.5px solid #d4e2f0;
        border-radius: 6px;
        padding: 0.3rem 0.7rem;
        font-size: 0.5rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.25s ease;
        background: var(--dark-yellow);
        white-space: nowrap;
      }

      .btn-eye i {
        font-size: 1.1rem;
        transition: transform 0.2s ease;
      }

      .btn-eye:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(30, 75, 110, 0.25);
        transform: translateY(-2px);
      }

      .btn-eye:hover i {
        transform: scale(1.15);
      }

      .btn-eye:active {
        transform: scale(0.96);
      }

      .btn-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: transparent;
        color: var(--surface-white);
        border: 1.5px solid #d4e2f0;
        border-radius: 6px;
        padding: 0.3rem 0.7rem;
        font-size: 0.5rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.25s ease;
        background: var(--dark-green);
        white-space: nowrap;
      }

      .btn-download i {
        font-size: 1.1rem;
        transition: transform 0.2s ease;
      }

      .btn-download:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(30, 75, 110, 0.25);
        transform: translateY(-2px);
      }

      .btn-download:hover i {
        transform: scale(1.15);
      }

      .btn-download:active {
        transform: scale(0.96);
      }

      /* ─── responsive tweaks ─── */
      @media (max-width: 768px) {
        .table-wrap {
          padding: 1rem 0.75rem 1.25rem 0.75rem;
        }

        .table-custom tbody td {
          padding: 0.7rem 0.6rem;
          font-size: 0.85rem;
        }

        .table-custom tbody td:nth-child(3) {
          max-width: 140px;
        }

        .btn-eye {
          padding: 0.35rem 0.75rem 0.35rem 0.6rem;
          font-size: 0.75rem;
        }

        .btn-eye i {
          font-size: 0.8rem;
        }

        .btn-download {
          padding: 0.25rem 0.75rem 0.25rem 0.6rem;
          font-size: 0.75rem;
        }

        .btn-download i {
          font-size: 0.95rem;
        }

        .table-header-custom h5 {
          font-size: 0.95rem;
        }

        .table-custom thead th {
          font-size: 0.7rem;
          padding: 0.4rem 0.6rem 0.6rem 0.6rem;
        }
      }

      @media (max-width: 480px) {
        .table-custom tbody td:nth-child(3) {
          max-width: 80px;
        }

        .table-custom tbody td:nth-child(2) {
          min-width: 100px;
          font-size: 0.8rem;
        }

        .btn-eye span {
          display: none;
        }

        .btn-eye {
          padding: 0.3rem 0.7rem;
          border-radius: 30px;
        }

        .btn-eye i {
          font-size: 1rem;
          margin: 0;
        }

        .btn-download span {
          display: none;
        }

        .btn-download {
          padding: 0.3rem 0.7rem;
          border-radius: 30px;
        }

        .btn-download i {
          font-size: 1rem;
          margin: 0;
        }
      }

      /* =================================================_
   Filament Rich Editor Content Styling for Bootstrap
   ================================================= */

.news-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #212529; /* Bootstrap body color */
    word-break: break-word;
}

/* --- Headings --- */
.news-content h1, 
.news-content h2, 
.news-content h3, 
.news-content h4, 
.news-content h5, 
.news-content h6 {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.news-content h1 { font-size: 2.25rem; }
.news-content h2 { font-size: 1.85rem; }
.news-content h3 { font-size: 1.5rem; }
.news-content h4 { font-size: 1.25rem; }
.news-content h5 { font-size: 1.1rem; }
.news-content h6 { font-size: 1rem; }

/* --- Paragraphs & Spacing --- */
.news-content p {
    margin-bottom: 1rem;
}

/* 
   TYPE 1: P tags with ONLY text (no child elements)
*/
.news-content > p:not(:empty):not(:has(*)) {
   text-indent: 5em;
     /* Burmese text formatting */
    font-family: 'Pyidaungsu', 'Myanmar Text', 'Noto Sans Myanmar', 'Zawgyi-One', sans-serif;
    line-height: 1.7;
    text-align: justify;
   
    /* Spacing */
    margin-bottom: 24px;
    padding: 0 4px;
    
    /* Improve readability */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}







/* --- Tables --- */
.news-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    background-color: transparent;
}

.news-content th,
.news-content td {
    padding: 0.5rem;
    vertical-align: top;
    border: 1px solid #dee2e6; /* Bootstrap default border color */
}

.news-content th {
    font-weight: 700;
    background-color: #f8f9fa; /* Light grey table header */
    text-align: left;
}

.news-content tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.025); /* Subtle striped rows */
}

/* --- Links --- */
.news-content a {
    color: #0d6efd;
    text-decoration: underline;
}

.news-content a:hover {
    color: #0a58ca;
}

/* --- Horizontal Rules --- */
.news-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #dee2e6;
}




/* --- Lists --- */

/* ===== CONVERT OL NUMBERS TO BURMESE ===== */

.news-content ol {
    list-style: none;
     padding-left: 5rem;
    counter-reset: burmese-counter;
}

.news-content ol li {
    counter-increment: burmese-counter;
    padding-left: 1rem;
    position: relative;
}

.news-content ol li::before {
    content: counter(burmese-counter);
    position: absolute;
    left: 0;
    display: none;
}

/* Burmese number mapping */
@counter-style burmese {
    system: numeric;
    symbols: '၀' '၁' '၂' '၃' '၄' '၅' '၆' '၇' '၈' '၉';
}

/* Not supported in all browsers, use fallback */
.news-content ol {
    list-style-type: burmese;
}


















/* ============================================================
   PYIDAUNGSU FONT (self-hosted)
   Drop the font files into /public/fonts/pyidaungsu/ :
     Pyidaungsu.woff2 / Pyidaungsu.woff  (regular)
     Pyidaungsu-Bold.woff2 / Pyidaungsu-Bold.woff
   Until files exist, browsers fall back to Myanmar Text / Noto.
   ============================================================ */
@font-face {
  font-family: 'Pyidaungsu';
  src: url('/fonts/pyidaungsu/Pyidaungsu.woff2') format('woff2'),
       url('/fonts/pyidaungsu/Pyidaungsu.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pyidaungsu';
  src: url('/fonts/pyidaungsu/Pyidaungsu-Bold.woff2') format('woff2'),
       url('/fonts/pyidaungsu/Pyidaungsu-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}