@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

html {
    height: 100%;
}

main {
    flex-grow: 1; /* Ini adalah kunci utama */
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    background-color: #f8f9fa;
    color: #495057;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1200px; /* Had lebar kandungan */
    margin: 0 auto; /* Tengahkankan container */
    padding: 0 40px; /* Padding kiri-kanan sama seperti header */
}

.section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    color: #090909;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title span {
    color: #C8102E;
}

.title-decorator {
    width: 100px;
    height: 3px;
    margin: 0 auto 40px auto;
    background-image: linear-gradient(to right, #032054 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 8px 2px;
    background-repeat: repeat-x;
}

/* ========== Malawakil Header Styling ========== */
.malawakil-header {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

/* Top Bar */
.top-bar {
    background-color: #032054;
    color: #ffffff;
    padding: 8px 0;
    font-size: 12px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px; /* Had maksimum untuk skrin ultra-lebar */
    margin: 0 auto;
    padding: 0 40px; /* Padding kiri-kanan */
}

/* Gantikan stail .social-links a yang lama dengan yang ini */
.social-links {
    display: flex;
    gap: 8px; /* Jarak antara ikon */
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Warna Latar Belakang Mengikut Jenama */
.social-fb { background-color: #1877F2; }
.social-x { background-color: #000000; }
.social-ig { background-color: #E4405F; }
.social-yt { background-color: #FF0000; }

.header-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-selector, .mission-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-selector img, .mission-location img {
    height: 14px;
}

.feedback-btn {
    background-color: #FFC72C;
    color: #032054;
    padding: 5px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

/* Main Navigation Bar */
.main-nav-bar {
    background-color: #ffffff;
    padding: 15px 0;
}

.nav-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img {
    height: 50px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text span:first-child {
    font-weight: 700;
    font-size: 18px;
    color: #032054;
}

.logo-text span:last-child {
    font-size: 14px;
    color: #6c757d;
}

/* --- STYLING MENU BARU (IKUT PORTAL UTAMA) --- */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.nav-menu li {
    position: relative;
}

/* Garisan pemisah putus-putus */
.nav-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    border-right: 1.8px dashed #e57373;
    opacity: 0.5;
}

.nav-menu a {
    display: block;
    padding: 15px 22px; /* Padding sama seperti portal utama */
    color: #495057;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px; /* Saiz font diseragamkan */
    transition: color 0.3s ease;
    border-bottom: none; /* Buang border bawah */
}

.nav-menu a:hover, .nav-menu a.active {
    color: #C8102E; /* Hanya tukar warna teks */
    border-bottom-color: transparent; /* Pastikan tiada border bawah semasa hover */
}

/* ========== Malawakil Hero Section ========== */
.malawakil-hero {
    position: relative;
    color: #ffffff;
    /* Padding bawah dikurangkan untuk merapatkan dengan seksyen seterusnya */
    padding-bottom: 120px;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(3, 32, 84, 0.2), rgba(3, 32, 84, 0.4));
    z-index: 2;
}

.malawakil-hero .container {
    position: relative;
    z-index: 3;
}

/* Bahagian Teks Sambutan */
.welcome-text {
    padding: 30px 0 50px 0;
    text-align: center;
}

.welcome-jata {
    height: 90px;
    margin-bottom: 15px;
}

.welcome-text h1 {
    font-size: 32px;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.welcome-text h2 {
    font-size: 18px;
    font-weight: 400;
    margin: 5px 0 0 0;
    opacity: 0.9;
}

.welcome-bid {
    font-size: 16px;
    line-height: 1.7;
    max-width: 650px;
    margin: 25px auto 0 auto;
    opacity: 0.9;
}


/* ========== Info Cards Section (Malawakil) ========== */
.info-section {
    background-color: #032054;
    padding: 150px 0 100px 0; /* Padding bawah ditambah kepada 100px */
    position: relative;
    overflow: hidden;
    margin-top: -150px;
}

.info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/operation-rotate-scaled.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

/* BEKAS KAD SAHAJA YANG DIANJAKKAN KE ATAS */
.info-cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 1;
    margin-top: -125px; /* Tarik bekas kad ini ke atas */
}

.info-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    color: #333333;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex: 1;
}

.info-card h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #032054;
    font-weight: 700;
}

.info-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}
.info-card p:last-child { margin-bottom: 0; }
.info-card em { font-size: 12px; }
.info-card strong { font-weight: 700; }

.curve-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curve-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 40px;
}

.curve-divider .shape-fill-main {
    fill: #f8f9fa; /* Warna latar body */
}

@media (max-width: 992px) {
    .info-cards-container {
        flex-direction: column;
        align-items: center;
        margin-top: -100px; /* Kurangkan anjakan pada skrin kecil */
    }
}

/* ========== Latest Mission News Section ========== */
.latest-mission-news {
    padding: 60px 0;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

.mission-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.mission-news-card {
    position: relative;
    overflow: hidden; /* Penting untuk ::before */
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    text-align: center;
    color: #032054;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: transparent; /* Kad utama kini lutsinar */
}

.mission-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(200, 16, 46, 0.2);
}

/* Latar belakang (warna + bunga) kini diuruskan sepenuhnya oleh ::before */
.mission-news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Lapisan bawah: Warna merah separa-lutsinar */
    background-color: rgba(200, 16, 46, 0.1);

    /* Lapisan atas: Corak bunga */
    background-image: url('../images/operation-rotate-scaled.png');

    background-size: cover;
    background-position: center;
    background-blend-mode: overlay; /* Campurkan corak dengan warna */

    transition: filter 0.4s ease; /* Transisi untuk efek blur */
    z-index: 1;
}

/* Apabila di-hover, blurkan lapisan ::before */
.mission-news-card:hover::before {
    filter: opacity(0.5);
}

.mission-news-card h3, .mission-news-card .card-meta {
    position: relative;
    z-index: 2; /* Pastikan teks sentiasa di atas lapisan ::before */
}

.mission-news-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.mission-news-card .card-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.mission-news-card .calendar-icon {
    width: 14px;
    height: 14px;
    fill: #555;
}

/* Responsive */
@media (max-width: 992px) {
    .mission-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .mission-news-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== MFA Info Section ========== */
.mfa-info-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    background-color: #ffffff; /* Latar belakang putih sebagai asas */
}

/* Overlay bunga & warna dengan efek parallax */
.mfa-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(200, 16, 46, 0.08); /* Warna merah lembut */
    background-image: url('../images/operation-rotate-scaled.png'); /* Corak bunga */
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    background-attachment: fixed; /* EFEK PARALLAX DI SINI */
    opacity: 0.25;
    z-index: 1;
}

.mfa-info-section .container {
    position: relative;
    z-index: 2;
    max-width: 1400px; /* DILEBARKAN SEDIKIT */
}

.mfa-info-swiper {
    width: 100%;
    height: 380px; /* KETINGGIAN DIKURANGKAN */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Slaid tidak lagi memerlukan latar belakang hitam */
.mfa-info-swiper .swiper-slide {
    background-color: transparent;
}

.mfa-info-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* DIKEMBALIKAN KEPADA 'cover' */
}

/* Stail untuk butang navigasi Swiper */
.mfa-info-swiper .swiper-button-next,
.mfa-info-swiper .swiper-button-prev {
    color: #ffffff;
    background-color: rgba(0,0,0,0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.mfa-info-swiper .swiper-button-next:hover,
.mfa-info-swiper .swiper-button-prev:hover {
    background-color: rgba(0,0,0,0.5);
}

.mfa-info-swiper .swiper-button-next::after,
.mfa-info-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Stail untuk pagination Swiper */
.mfa-info-swiper .swiper-pagination-bullet-active {
    background-color: #ffffff;
}

/* ========== Social Media Section ========== */
.social-media-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Nisbah diubah sedikit */
    gap: 50px;
    align-items: center; /* Jajarkan secara menegak di tengah */
}

.facebook-feed {
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    min-height: 500px; /* Pastikan ketinggian minimum */
}

.images-container {
    position: relative;
    /* height: 100% dibuang */
}

.image-back, .image-front {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.image-back:hover,
.image-front:hover {
    transform: scale(1.03);
    z-index: 3;
}

.image-back img, .image-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-back {
    width: 85%;
    /* height: auto; tidak lagi diperlukan */
}

.image-front {
    position: absolute;
    width: 60%;
    right: -40px; /* Dianjakkan untuk tindanan lebih cantik */
    bottom: -40px; /* Dianjakkan untuk tindanan lebih cantik */
    border: 5px solid #ffffff;
}

/* Responsive */
@media (max-width: 992px) {
    .social-grid {
        grid-template-columns: 1fr;
    }
    .images-container {
        margin-top: 40px;
        /* min-height tidak lagi diperlukan */
    }
}

/* ========== Footer Section ========== */
.main-footer {
    position: relative;
    padding: 60px 0; /* Padding atas-bawah dikurangkan */
    color: #ffffff;
    overflow: hidden;
}

.footer-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.footer-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(3, 32, 84, 0.4), rgba(3, 32, 84, 0.6));
    z-index: 2;
}

.main-footer-content {
    position: relative;
    z-index: 3;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px; /* Padding kiri-kanan untuk full-width */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 40px;
    align-items: start;
}

.footer-title {
    font-size: 16px; /* Dikecilkan */
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
}

.footer-title::after {
    content: '⏷';
    font-size: 20px;
    color: #C8102E;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
}

.footer-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #FFC72C 45%, transparent 45%, transparent 55%, #FFC72C 55%);
}

.footer-column {
    font-size: 14px; /* Saiz font asas dikecilkan */
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #e9ecef;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #ffffff;
}

.quicklinks-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.footer-logo-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo-info img {
    height: 70px; /* Saiz Jata dikecilkan */
}

/* Stail baru untuk tajuk & sari kata Kedutaan */
.footer-logo-text span:first-child {
    font-size: 18px;
    font-weight: 700;
    display: block;
    line-height: 1.4;
}
.footer-logo-text span:last-child {
    font-size: 14px;
    opacity: 0.8;
    display: block;
}

/* Sub-footer styling */
.sub-footer {
    background-color: #021438;
    color: #adb5bd;
    padding: 15px 0;
    font-size: 12px; /* Dikecilkan */
}

.sub-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

.sub-footer p { margin: 0; }
.sub-footer a { color: #adb5bd; text-decoration: none; }
.sub-footer a:hover { text-decoration: underline; }

/* Responsive untuk Footer */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .quicklinks-container {
        grid-template-columns: 1fr;
    }
    .sub-footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ========== STYLING UNTUK HALAMAN DALAMAN (INNER PAGES) ========== */

/* Latar Belakang Parallax (Sama seperti HQ) */
.inner-page-parallax-bg {
    position: relative;
    flex-grow: 1; /* Pastikan ia mengisi ruang ke footer */
    padding: 60px 0;
}

.inner-page-parallax-bg::before {
    content: '';
    position: fixed; /* Kunci Latar Belakang */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/operation-rotate-scaled.png'); /* Guna corak bunga sedia ada */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.1; /* Sangat lembut */
    z-index: -1;
}


/* Banner Halaman (Versi Malawakil) */
.page-banner {
    width: 100%;
    padding: 70px 0;
    /* Cadangan warna: Biru-kelabu lembut & elegan */
    background: linear-gradient(to right, #edf2f7, #dbe4f0);
    text-align: center;
    color: #032054; /* Guna warna utama untuk teks */
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/operation-rotate-scaled.png'); /* Corak bunga */
    background-size: cover;
    background-position: center;
    opacity: 0.05; /* Opacity lebih rendah untuk banner */
    z-index: 1;
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

.page-banner h1 {
    font-size: 40px;
    font-weight: 900;
    margin: 0 0 10px 0;
    text-shadow: 0 1px 2px rgba(255,255,255,0.1);
}

.page-banner p {
    font-size: 18px;
    margin: 0;
    opacity: 0.8;
}

/* Susun Atur Halaman (Sidebar + Kandungan) */
.inner-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar 280px, baki untuk kandungan */
    gap: 30px;
}

/* Stail Sidebar Kiri */
.inner-sidebar .sidebar-menu {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    overflow: hidden; /* Untuk pastikan border-radius cantik */
    border: 1px solid #e9ecef;
}

.inner-sidebar .sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background-color: #032054; /* Guna warna utama portal */
    padding: 18px 20px;
    margin: 0;
}

.inner-sidebar .sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inner-sidebar .sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    color: #495057;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.inner-sidebar .sidebar-menu li:last-child a {
    border-bottom: none;
}

/* Efek 'arrow' seperti dalam gambar rujukan */
.inner-sidebar .sidebar-menu li a::before {
    content: '❯';
    margin-right: 12px;
    font-size: 10px;
    color: #C8102E; /* Guna warna merah tema */
    transition: transform 0.3s ease;
}

.inner-sidebar .sidebar-menu li a:hover {
    background-color: #f8f9fa;
    color: #C8102E;
}

.inner-sidebar .sidebar-menu li a:hover::before {
    transform: translateX(3px);
}

/* Stail untuk item aktif */
.inner-sidebar .sidebar-menu li a.active {
    background-color: #fdf0f2; /* Latar belakang merah jambu lembut */
    color: #C8102E;
    font-weight: 700;
    border-left: 4px solid #C8102E; /* Garisan merah di kiri */
    padding-left: 16px; /* Tolak teks ke kanan sikit */
}

/* Stail Kandungan Utama */
.inner-content .breadcrumbs {
    margin-bottom: 20px;
    font-size: 13px;
    color: #6c757d;
    background-color: rgba(255,255,255,0.7);
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
}

.inner-content .breadcrumbs a {
    color: #032054; /* Guna warna utama */
    text-decoration: none;
}
.inner-content .breadcrumbs a:hover {
    text-decoration: underline;
}
.inner-content .breadcrumbs span {
    margin: 0 5px;
}
.inner-content .breadcrumbs strong {
    color: #C8102E; /* Guna warna merah */
    font-weight: 600;
}

/* Kad Kandungan (Diinspirasi dari HQ) */
.inner-content .content-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.inner-content .content-card h2 {
    margin-top: 0;
    font-size: 28px;
    font-weight: 900;
    color: #032054;
    margin-bottom: 25px;
}

.inner-content .content-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}
.inner-content .content-card p:last-child {
    margin-bottom: 0;
}

/* Stail Responsive untuk Halaman Dalaman */
@media (max-width: 992px) {
    .inner-page-layout {
        grid-template-columns: 1fr; /* Tukar jadi 1 kolum */
    }

    .inner-sidebar {
        margin-bottom: 30px; /* Jarakkan sidebar dari kandungan */
    }
}

@media (max-width: 767px) {
    .page-banner {
        padding: 50px 0;
    }
    .page-banner h1 {
        font-size: 32px;
    }
    .page-banner p {
        font-size: 16px;
    }
    .inner-content .content-card {
        padding: 25px;
    }
    .inner-content .content-card h2 {
        font-size: 24px;
    }
}

/* Stail untuk senarai di dalam .content-card */
.content-card ul.styled-list {
    list-style: none;
    padding-left: 0;
    margin: 25px 0;
}

.content-card ul.styled-list li {
    position: relative;
    padding-left: 30px; /* Ruang untuk ikon */
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

.content-card ul.styled-list li::before {
    content: '✔'; /* Guna 'tick' atau '❯' */
    position: absolute;
    left: 0;
    top: 4px; /* Laraskan kedudukan vertikal */
    color: #C8102E; /* Warna merah tema */
    font-weight: 700;
    font-size: 14px;
}

/* Stail untuk Sub-header dalam Kad Kandungan */
.content-subheader {
    background-color: #fcf8e3; /* Kuning Pudar */
    border: 1px solid #f5e79e;
    color: #8a6d3b;
    padding: 12px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 30px; /* Jarak dengan senarai di bawah */
}

/* Stail untuk Senarai Butiran Kontak */
.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Jarak antara setiap baris (cth: Alamat, Telefon) */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.7;
}

.contact-label {
    flex: 0 0 120px; /* Lebar tetap untuk label */
    font-weight: 700;
    color: #333;
}

.contact-value {
    flex: 1; /* Ambil baki ruang */
    color: #555;
}

.contact-value strong {
    color: #000;
}

.contact-value a {
    color: #032054; /* Guna warna utama */
    text-decoration: none;
}

.contact-value a:hover {
    text-decoration: underline;
}

/* Stail untuk Butiran Lokasi (Alamat & Kontak) */
.location-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolum sama besar */
    gap: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* Garisan pemisah */
}

.location-address h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #032054;
    font-weight: 700;
}

.location-address p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

.location-contacts {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antara ikon */
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
}

.contact-row i {
    width: 18px;
    text-align: center;
    margin-top: 4px;
    color: #C8102E; /* Guna warna merah tema */
    font-size: 16px;
}

.contact-text {
    flex: 1;
    line-height: 1.6;
    color: #333;
}

/* Susun nombor telefon secara menegak */
.contact-text span {
    display: block;
}

.contact-text a {
    color: #032054; /* Guna warna utama */
    text-decoration: none;
    word-break: break-all; /* Elak link panjang 'overflow' */
}

.contact-text a:hover {
    text-decoration: underline;
}

/* Stail untuk Bekas Peta Responsif */
.map-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Nisbah 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd; /* Border kelabu lembut */
}

.map-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-links {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
}

.map-links a {
    color: #032054;
    font-weight: 600;
    text-decoration: none;
}

.map-links a:hover {
    text-decoration: underline;
}

.map-links a:last-child {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #ccc;
}

/* Responsive untuk grid alamat */
@media (max-width: 767px) {
    .location-details-grid {
        grid-template-columns: 1fr; /* Susun jadi 1 kolum */
    }

    .location-contacts {
        margin-top: 20px; /* Jarak sikit bila di mobile */
    }
}

/* Stail untuk Jadual Data (cth: Cuti Umum) */
.content-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #444;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Container untuk table responsif (scroll jika perlu) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.data-table {
    width: 100%;
    border-collapse: collapse; /* Cantumkan border */
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

table.data-table thead th {
    background-color: #f8f9fa; /* Latar header kelabu lembut */
    border: 1px solid #dee2e6;
    padding: 12px 15px;
    font-weight: 700;
    color: #343a40;
    text-align: left;
    vertical-align: bottom;
}

table.data-table tbody td {
    border: 1px solid #dee2e6;
    padding: 12px 15px;
    color: #495057;
    vertical-align: top;
}

/* Stail Zebra-striping untuk row */
table.data-table tbody tr:nth-of-type(even) {
    background-color: #fdfdfd;
}

table.data-table tbody tr:hover {
    background-color: #f1f6fc; /* Efek hover biru lembut */
}

/* Lebar & Jajaran Khas */
table.data-table .col-no {
    width: 50px;
    text-align: center;
}

/* Stail untuk Nota di Bawah Jadual */
.table-notes {
    margin-top: 25px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.table-notes p {
    margin: 0 0 5px 0;
}

/* ========== STYLING UNTUK SIDEBAR BERSARANG (NESTED) ========== */

/* Bekas <ul> untuk sub-menu */
.sidebar-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fdfdfd; /* Latar pudar untuk bezakan sub-item */
}

/* Pautan <a> di dalam sub-menu */
.sidebar-menu .sub-menu li a {
    font-size: 13px; /* Saiz fon lebih kecil */
    font-weight: 500;
    /* Tambah indentasi kiri (20px padding asal + 20px lagi) */
    padding-left: 40px;
    border-bottom: 1px solid #f9f9f9; /* Garisan pemisah lebih lembut */
}

/* Ikon '❯' untuk sub-menu (lebih kecil) */
.sidebar-menu .sub-menu li a::before {
    margin-right: 10px;
    font-size: 9px;
    transform: translateY(-1px);
}

/* Apabila sub-menu item aktif */
.sidebar-menu .sub-menu li a.active {
    font-weight: 700;
    /* Ia akan guna stail .active sedia ada (latar pink, border merah) */
    /* Kita hanya perlu pastikan padding-left kekal */
    padding-left: 36px; /* (40px padding - 4px border) */
}

/* Apabila item PARENT sedang aktif (cth: kita di sub-page) */
/* Ini akan 'highlight' parent juga */
.sidebar-menu li.parent-active > a {
    background-color: #f8f9fa; /* Latar kelabu lembut */
    color: #C8102E; /* Teks merah */
    font-weight: 700;
}

/* 1. Sembunyikan sub-menu secara lalai & tambah transisi */
.sidebar-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    background-color: #fafafa; /* Latar sedikit berbeza */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

/* 2. Paparkan sub-menu apabila .is-open ditambah oleh JS */
.sidebar-menu li.has-children.is-open .sub-menu {
    max-height: 500px; /* Letak nilai tinggi (anggaran) */
    transition: max-height 0.5s ease-in, padding 0.5s ease-in;
    padding: 5px 0; /* Tambah padding bila buka */
}

/* 3. Stailkan pautan <a> yang ada sub-menu */
.sidebar-menu li.has-children > a {
    position: relative; /* Diperlukan untuk letak ikon */
}

/* 4. Tambah ikon 'arrow' di sebelah kanan */
.sidebar-menu li.has-children > a::after {
    content: '❯';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* Menghala ke kanan */
    font-size: 12px;
    color: #C8102E;
    transition: transform 0.3s ease;
}

/* 5. Pusingkan 'arrow' bila menu dibuka */
.sidebar-menu li.has-children.is-open > a::after {
    transform: translateY(-50%) rotate(90deg); /* Menghala ke bawah */
}

/* 6. 'Highlight' pautan parent apabila sub-menu dibuka */
.sidebar-menu li.has-children.is-open > a {
    background-color: #f8f9fa;
    color: #C8102E;
    font-weight: 700;
}

/* Stail untuk Header Dalam Kad Kandungan (Jata + Tajuk) */
.content-card-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.content-card-header img {
    height: 80px; /* Saiz Jata */
    margin-bottom: 15px;
}

.content-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px 0;
}

.content-card-header h4 {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin: 0;
}

/* Stail Tambahan untuk Data Table */

/* Utility class untuk jajaran tengah */
.data-table .text-center {
    text-align: center;
    vertical-align: middle;
}

/* Pastikan sel biasa jajar ke atas */
table.data-table tbody td {
    vertical-align: top;
}

/* Stail jika ada senarai dalam jadual */
table.data-table td ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}
table.data-table td ul li {
    margin-bottom: 5px;
}

/* Stail untuk Teks Dwibahasa dalam Jadual */
.data-table .text-malay {
    display: block;
    color: #333;
    font-weight: 500;
}
.data-table .text-english {
    display: block;
    color: #555;
    font-style: italic;
    font-size: 13px;
    margin-top: 4px;
}
.data-table td .text-english {
    line-height: 1.5; /* Perbaiki line-height untuk perenggan panjang */
}

/* Stail untuk Spesifikasi Gambar Terbenam dalam Jadual */
.table-embedded-spec {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
    text-align: left;
}
.table-embedded-spec p {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

.table-embedded-image {
    display: block;
    max-width: 200px; /* Hadkan lebar gambar */
    height: auto;
    margin: 10px auto; /* Tengahkankan gambar */
    border: 1px solid #ddd;
}

.table-embedded-spec ul {
    list-style: disc;
    padding-left: 20px;
    margin: 15px 0 0 0;
    text-align: left;
    font-size: 13px;
    color: #333;
}
.table-embedded-spec ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Penambahbaikan untuk Stail Dwibahasa */
.text-malay strong {
    color: #000;
}

/* Stail untuk tajuk <h3> jadual kedua */
.content-card h3 .text-english {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin-top: 5px;
    font-style: italic;
    display: block;
}

/* Stail untuk nota di luar jadual */
.table-notes .text-malay {
    display: block;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6;
}
.table-notes .text-english {
    display: block;
    color: #555;
    font-style: italic;
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.6;
}
.table-notes p {
    margin-bottom: 10px;
}

/* Stail untuk header jadual (cth: NO. / BIL.) */
table.data-table thead th {
    line-height: 1.4;
}

/* Stail untuk Kotak Nota Khas */
.content-notice-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 5px solid #032054; /* Guna warna utama */
    padding: 20px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    border-radius: 0 8px 8px 0;
}
.content-notice-box strong {
    color: #000;
}

/* Stail untuk Senarai (List) */
.content-card ol.list-decimal,
.content-card ul.list-bullet {
    padding-left: 25px; /* Jarak untuk nombor/bullet */
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
}
.content-card ol.list-decimal li,
.content-card ul.list-bullet li {
    margin-bottom: 15px;
}

.content-card ul.list-roman {
    list-style-type: lower-roman;
    padding-left: 25px; /* Jarak untuk (i, ii, iii) */
    margin-top: 10px;
}

/* Stail untuk Jadual Terbenam dalam Senarai */
.list-embedded-table {
    margin-top: 20px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6; /* Border keliling jadual */
    border-radius: 4px;
    overflow: hidden; /* Untuk border-radius */
}
.list-embedded-table table.data-table {
    margin: 0;
}
.list-embedded-table table.data-table tr:hover {
    background-color: transparent; /* Matikan efek hover */
}
.list-embedded-table table.data-table td {
    border: 1px solid #dee2e6; /* Pastikan semua border ada */
}
.data-table .col-letter {
    width: 40px;
    text-align: center;
    vertical-align: top;
    font-weight: 600;
    background-color: #f8f9fa;
}

/* Stail untuk Borang Terbenam dalam Jadual */
.table-embedded-form {
    display: block;
    width: 100%;
    max-width: 600px; /* Hadkan lebar borang */
    height: auto;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Stail untuk Teks 'Highlight' Kuning */
.highlight-yellow {
    background-color: #fcf8e3; /* Guna warna dari 'Honorary Consul' */
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
    color: #8a6d3b;
}

/* Stail untuk Blok Nota (bawah senarai 1) */
.content-notes {
    margin: 25px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.content-notes p {
    font-size: 15px;
    line-height: 1.7;
    color: #495057;
    margin: 0 0 10px 0;
}
.content-notes p:last-child {
    margin-bottom: 0;
}

/* Stail untuk Senarai Bernombor (Travel Advisory) */
ol.list-advisory {
    list-style: none; /* Buang nombor default */
    counter-reset: advisory-counter; /* Mula kaunter */
    padding-left: 0;
    margin: 20px 0;

    /* Set kaunter 'start' dari atribut HTML <ol start="X"> */
    counter-reset: advisory-counter calc(var(--start, 1) - 1);
}

ol.list-advisory li {
    position: relative;
    padding-left: 40px; /* Ruang untuk nombor (cth: "1.") */
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    counter-increment: advisory-counter; /* Tambah 1 pada kaunter */
}

ol.list-advisory li::before {
    content: counter(advisory-counter) "."; /* Papar nombor kaunter + titik */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: #333;
    width: 30px; /* Selaraskan lebar nombor */
}

/* Stail untuk Senarai (a, b, c) di dalam senarai bernombor */
ol.list-advisory li ul.list-alpha {
    list-style-type: lower-alpha; /* (a), (b), (c) */
    padding-left: 25px;
    margin-top: 15px;
    margin-bottom: 0;
}
ol.list-advisory li ul.list-alpha li {
    padding-left: 10px;
    margin-bottom: 10px;
}
ol.list-advisory li ul.list-alpha li::before {
    display: none; /* Sembunyi nombor "1." pada sub-item */
}

/* Stail untuk Blok Alamat */
.address-block {
    margin: 15px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.7;
}
.address-block a {
    color: #032054;
    font-weight: 600;
}

/* Stail untuk Tajuk Sub-seksyen (cth: Letter of Good Conduct) */
.content-card h4.content-subheading {
    font-size: 18px;
    font-weight: 700;
    color: #032054; /* Guna warna utama */
    margin-top: 30px; /* Jarak dari perenggan atas */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee; /* Garisan bawah lembut */
}

/* Stail untuk Senarai (a, b, c) */
.content-card ul.list-alpha {
    list-style-type: lower-alpha; /* (a), (b), (c) */
    padding-left: 25px;
    margin: 15px 0;
    font-size: 16px;
    line-height: 1.8;
}
.content-card ul.list-alpha li {
    margin-bottom: 10px;
}

/* Garisan Pemisah dalam Kad */
hr.content-divider {
    margin: 30px 0;
    border: 0;
    border-top: 1px dashed #ccc;
}

/* Stail Khas untuk Jadual Kepala Hitam */
.data-table.table-dark-header thead th {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #555;
}

.data-table.table-dark-header tbody td {
    text-align: center;
    vertical-align: middle;
}

/* Stail untuk Nota Kaki (Fine Print) */
.fine-print-notes {
    margin-top: 30px;
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}

.fine-print-notes p strong {
    color: #000;
}

/* Senarai Definisi (VwTR, VwR) */
.fine-print-notes ul.list-definitions {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.fine-print-notes ul.list-definitions li {
    padding-left: 60px; /* Ruang untuk label */
    position: relative;
    margin-bottom: 10px;
}

.fine-print-notes ul.list-definitions li strong {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #000;
}

/* Senarai Nota Khas (yang ada pink) */
.fine-print-notes ol.list-special-notes {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.fine-print-notes li.note-pink {
    color: #E4405F; /* Guna warna IG (pink) */
    font-style: italic;
    display: flex;
    gap: 10px;
}
.fine-print-notes li.note-pink span {
    font-weight: bold;
}
.fine-print-notes li.note-pink div {
    flex: 1;
}


/* Senarai Bernombor Ringkas (untuk "Note *") */
.fine-print-notes ol.list-decimal-simple {
    list-style-type: decimal;
    padding-left: 20px;
    margin: 10px 0;
}

.fine-print-notes ol.list-decimal-simple li {
    margin-bottom: 12px;
    padding-left: 5px;
}

.fine-print-notes ol.list-decimal-simple ul.list-alpha {
    list-style-type: lower-alpha;
    padding-left: 20px;
    margin-top: 10px;
}

/* ========== STYLING UNTUK SENARAI DOKUMEN (RESOURCES) ========== */

ul.document-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 0 0;
}

ul.document-list li {
    margin-bottom: 12px;
}

.file-link {
    display: inline-flex; /* Guna flex untuk selarikan ikon & teks */
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: #032054; /* Guna warna utama */
    transition: color 0.3s ease;
}

.file-link:hover {
    color: #C8102E; /* Guna warna merah */
    text-decoration: underline;
}

/* Stail Ikon menggunakan Font Awesome (sedia ada) */
.file-link.file-pdf::before {
    content: '\f1c1'; /* Kod unicode untuk fa-file-pdf */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    color: #C8102E; /* Warna ikon merah */
    transform: translateY(-1px);
}

/* ========== STYLING UNTUK SENARAI ARKIB ========== */

table.archive-list-table th.col-date,
table.archive-list-table td.col-date {
    width: 120px; /* Lebar tetap untuk tarikh */
    text-align: center;
}

table.archive-list-table tbody tr {
    transition: background-color 0.3s ease;
}

table.archive-list-table tbody tr:hover {
    background-color: #f8f9fa; /* Hover lembut */
}

table.archive-list-table tbody td a {
    font-weight: 500;
    color: #032054;
    text-decoration: none;
}

table.archive-list-table tbody td a:hover {
    text-decoration: underline;
    color: #C8102E;
}

/* Stail Navigasi Halaman (Pagination) */
.pagination-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 14px;
}

.pagination-nav .page-info {
    color: #555;
}

.pagination-nav .page-links {
    display: flex;
    gap: 5px;
}

.pagination-nav .page-link {
    display: inline-block;
    padding: 6px 12px;
    text-decoration: none;
    color: #032054;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination-nav .page-link:hover {
    background-color: #f4f4f4;
    border-color: #ccc;
}

.pagination-nav .page-link.active {
    background-color: #032054;
    color: #ffffff;
    border-color: #032054;
}

.pagination-nav .page-link.disabled {
    color: #aaa;
    pointer-events: none;
    background-color: #f9f9f9;
}


/* ========== STYLING UNTUK POS TUNGGAL (ARKIB) ========== */

/* Meta Pos (Tarikh) */
.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #6c757d;
}

.post-meta .post-icon {
    font-size: 16px;
}

/* Badan Pos */
.post-body h4 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 20px;
}

.post-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.post-body .post-image-wrapper {
    margin: 25px 0;
    text-align: center;
}

.post-body .post-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Stail Teks Arab */
.post-body p.text-arabic {
    direction: rtl; /* Jajaran kanan-ke-kiri */
    font-family: 'Tahoma', sans-serif; /* Guna font yang menyokong Arab */
    font-size: 18px;
    line-height: 2;
    color: #000;
}

/* Tag Pos */
.post-tags {
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-tags a {
    display: inline-block;
    background-color: #f1f1f1;
    color: #555;
    padding: 5px 12px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
}
.post-tags a:hover {
    background-color: #C8102E;
    color: #ffffff;
}

/* Navigasi Pos (Bawah) */
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 25px;
}

.post-navigation .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #032054;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.post-navigation .nav-link:hover {
    background-color: #f8f9fa;
    color: #C8102E;
}

.post-navigation .back-to-list {
    color: #555;
    border: 1px solid #ddd;
}
.post-navigation .back-to-list:hover {
    background-color: #032054;
    color: #fff;
    border-color: #032054;
}

/* ========== STYLING UNTUK KAD PROFIL (OUR STAFF) ========== */

/* Kad Profil Duta Semasa */
.profile-card-current {
    display: flex; /* Susun gambar & teks sebelah-menyebelah */
    flex-direction: column; /* Tukar ke 'column' pada skrin kecil */
    align-items: center;
    text-align: center;
    max-width: 450px; /* Hadkan lebar kad */
    margin: 20px auto 40px auto; /* Tengahkankan kad */
    padding: 30px;
    background-color: #032054; /* Guna warna utama */
    color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background-image: url('../images/operation-rotate-scaled.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    position: relative;
}

.profile-card-image {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Bulatkan gambar */
    overflow: hidden;
    margin-bottom: 20px;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.profile-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
}

.profile-card-info {
    display: flex;
    flex-direction: column;
}

.profile-card-info .profile-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 5px;
}

.profile-card-info .profile-title {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.profile-card-info .profile-period {
    font-size: 13px;
    font-style: italic;
    opacity: 0.7;
}

/* Stail Jadual Profil (Bekas Duta) */
table.profile-table th.col-photo {
    width: 100px;
}

/* ===== SOLUSI BARU UNTUK GAMBAR JADUAL (MESTI JADI) ===== */

/* 1. Stail <td> (Sel Jadual) */
table.profile-table td.col-photo {
    width: 80px; /* Beri ruang yang cukup */
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

/* 2. Cipta bekas <div> yang BULAT di dalam <td> */
.table-profile-pic {
    width: 60px;  /* Saiz bulatan */
    height: 60px; /* Saiz bulatan */
    border-radius: 50%; /* Jadikannya bulat */
    overflow: hidden; /* Potong lebihan gambar */
    border: 1px solid #ddd;
    margin: 0 auto; /* Tengahkankan bulatan dalam <td> */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 3. Stail <img> di dalam <div> */
.table-profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Penuhkan bulatan */
    transform: scale(1.2); /* Zoom untuk buang tepi lutsinar */
}

table.profile-table td {
    vertical-align: middle;
}

table.profile-table td strong {
    font-size: 15px;
    color: #032054;
}

/* ========== STYLING UNTUK JADUAL STAF (HOME BASED STAFF) ========== */

table.staff-list-table td {
    vertical-align: middle;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Stailkan Kolum Nama */
table.staff-list-table td:first-child {
    width: 40%; /* Beri lebar tetap untuk nama */
}

table.staff-list-table strong {
    font-size: 15px;
    color: #032054;
    font-weight: 700;
}

/* Stailkan Kolum Jawatan */
table.staff-list-table td:last-child {
    font-size: 14px;
    line-height: 1.6;
}

/* ========== STYLING UNTUK JADUAL JOB VACANCY ========== */

table.job-vacancy-table {
    table-layout: fixed; /* Penting untuk pastikan lebar kolum dipatuhi */
    font-size: 15px; /* Besarkan sikit font asas jadual */
}

/* Tiada header <thead>, jadi kita gayakan tbody <tr> */
table.job-vacancy-table tbody tr:nth-of-type(even) {
    background-color: #fcfcfc;
}
table.job-vacancy-table tbody tr:hover {
    background-color: #f1f6fc;
}

/* Stail untuk Kolum Label (Kiri) */
table.job-vacancy-table .col-label {
    width: 250px; /* Lebar tetap untuk label */
    font-weight: 700;
    color: #333;
    background-color: #f8f9fa; /* Latar kelabu lembut untuk label */
    vertical-align: top; /* Jajar ke atas */
    line-height: 1.6;
}

/* Stail untuk Kolum Butiran (Kanan) */
table.job-vacancy-table td {
    vertical-align: top; /* Jajar ke atas */
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.7;
}

/* Pastikan senarai di dalam jadual ada ruang */
table.job-vacancy-table td ul {
    margin-top: 10px;
    margin-bottom: 0;
}

/* ========== STYLING UNTUK JADUAL PROCUREMENT ========== */

table.procurement-table {
    font-size: 14px;
}

table.procurement-table thead th {
    text-align: left;
    vertical-align: middle;
}

table.procurement-table tbody td {
    vertical-align: top;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.6;
}

/* Stail untuk tajuk tender/quotation */
table.procurement-table tbody td:nth-child(2) {
    font-weight: 500;
    color: #032054; /* Guna warna utama */
}

/* Stail untuk Status (Closed, Awarded) */
.status-closed {
    font-weight: 700;
    color: #C8102E; /* Guna warna merah tema */
}

.status-awarded {
    font-weight: 700;
    color: #008000; /* Guna warna hijau */
}

/* Gunakan semula stail .file-link yang sedia ada */
table.procurement-table .file-link {
    font-size: 14px;
    font-weight: 700;
}

/* ========== STYLING UNTUK ACCORDION (FAQs) ========== */

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Jarak antara setiap soalan */
    margin-top: 30px;
}

.accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #ffffff;
    transition: box-shadow 0.3s ease;
}

/* Stail apabila item terbuka */
.accordion-item.is-open {
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    border-color: #dee2e6;
}

.accordion-trigger {
    width: 100%;
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 18px 50px 18px 25px; /* Kiri-Kanan-Atas-Bawah */
    font-size: 16px;
    font-weight: 700;
    color: #032054;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.accordion-trigger:hover {
    color: #C8102E;
}

/* Ikon '+' di sebelah kanan */
.accordion-trigger::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: #C8102E;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Tukar ikon '+' kepada '−' bila aktif */
.accordion-item.is-open .accordion-trigger::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}

.accordion-item.is-open .accordion-trigger {
    color: #C8102E;
}

/* Panel Jawapan (Content) */
.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.accordion-panel .accordion-content {
    padding: 0 25px 25px 25px; /* Padding hanya di dalam panel */
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

/* Apabila panel terbuka */
.accordion-item.is-open .accordion-panel {
    max-height: 2000px; /* Letak nilai tinggi (anggaran) */
    transition: max-height 0.5s ease-in;
}

.accordion-panel-content p {
    margin-top: 0;
    margin-bottom: 15px;
}
.accordion-panel-content p:last-child {
    margin-bottom: 0;
}
.accordion-panel-content ul {
    margin-top: 0;
}

/* ========== STYLING UNTUK PETA LAMAN (SITE MAP) ========== */

.sitemap-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.sitemap-list li {
    margin-bottom: 12px;
}

.sitemap-list a {
    text-decoration: none;
    color: #032054;
    font-weight: 500;
    transition: color 0.3s ease;
}

.sitemap-list a:hover {
    color: #C8102E;
    text-decoration: underline;
}

/* Peringkat 1 (Top Level) */
.sitemap-list > li > a {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/* Peringkat 2 (Second Level) */
.sitemap-list ul {
    list-style: none;
    padding-left: 25px;
    margin-top: 12px;
}

.sitemap-list ul li a {
    font-size: 16px;
    display: inline-block;
    position: relative;
    padding-left: 20px; /* Ruang untuk ikon '❯' */
}

.sitemap-list ul li a::before {
    content: '❯';
    position: absolute;
    left: 0;
    top: 1px;
    color: #C8102E;
    font-size: 12px;
}

/* Peringkat 3 (Third Level) */
.sitemap-list ul ul {
    padding-left: 30px;
}

.sitemap-list ul ul li a {
    font-size: 15px;
    color: #495057; /* Warna lebih pudar */
}

.sitemap-list ul ul li a::before {
    content: '»'; /* Guna ikon berbeza */
    color: #555;
    top: 0;
}

.site-footer {
    position: relative;
    z-index: 5;
}