:root {
            --primary-color: #005B2A;
            --primary-light: #ecfdf5;
            --accent-color: #10b981;
            --text-dark: #1f2937;
            --text-muted: #4b5563;
            --bg-light: #f9fafb;
            --radius-lg: 16px;
            --radius-md: 12px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            padding-top: 60px;
            -webkit-font-smoothing: antialiased;
        }

        /* ==========================================================================
   Chatbox Styles - (ဖုန်း Keyboard ပေါ် ကွက်တိကပ်ရန် dynamic layout ပြင်ဆင်ပြီး)
   ========================================================================== */
        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1060;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
        }

        #chatWindow {
            display: none;
            width: 360px;
            height: 520px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(0,0,0,0.15);
            flex-direction: column;
            overflow: hidden;
            margin-bottom: 12px;
            border: 1px solid #e2e8f0;
            position: relative;
            transition: all 0.2s ease-in-out;
        }

        .chat-header {
            background: var(--primary-color);
            color: white;
            padding: 16px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 0 0 auto;
        }

        .chat-messages {
            flex: 1 1 auto;
            padding: 16px;
            overflow-y: auto;
            background: #f8fafc;
            font-size: 0.9rem;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 60px; /* အောက်ခြေ စာရိုက်ကွက်စာ နေရာချန်ထားရန် */
        }

        .chat-input-area {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            padding: 12px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 8px;
            background: white;
            align-items: center;
            z-index: 5;
        }

        #chatInput {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid #cbd5e1;
            border-radius: 24px;
            outline: none;
            font-size: 0.9rem;
        }

        #chatInput:focus {
            border-color: var(--primary-color);
        }

        /* 📱 ဖုန်း screen (width 576px အောက်) အတွက် Keyboard ပေါ် အသေကပ်မည့် CSS */
        @media (max-width: 576px) {
            .chat-container {
                bottom: 0 !important;
                right: 0 !important;
                left: 0 !important;
                top: 0 !important;
                width: 100vw;
                height: 100vh;
                align-items: stretch;
                justify-content: stretch;
                pointer-events: none;
            }

            .chat-container > button.rounded-circle {
                position: fixed;
                bottom: 20px;
                right: 20px;
                pointer-events: auto;
                z-index: 1061;
            }

            #chatWindow {
                position: fixed;
                left: 0;
                width: 100vw;
                margin-bottom: 0;
                border-radius: 0;
                border: none;
                z-index: 1062;
                pointer-events: auto;
                
                /* JavaScript ကနေ dynamic တွက်ပေးမယ့် variable တွေဖြစ်ပါတယ် */
                top: var(--chat-top, 0px);
                height: var(--chat-height, 100vh);
                
                display: none; 
                flex-direction: column;
            }

            .chat-messages {
                flex: 1 1 auto;
                overflow-y: auto;
                margin-bottom: 60px; 
            }

            .chat-input-area {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 60px;
                padding: 12px;
                background: white;
                border-top: 1px solid #e2e8f0;
                z-index: 10;
            }
        }

        .msg {
            padding: 10px 14px;
            border-radius: 14px;
            max-width: 85%;
            word-wrap: break-word;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .user-msg {
            background: var(--primary-color);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 2px;
        }

        .ai-msg {
            background: #ffffff;
            color: #1e293b;
            align-self: flex-start;
            border-bottom-left-radius: 2px;
            border: 1px solid #e2e8f0;
        }

        .admin-msg {
            background: #f1f5f9;
            color: #0f172a;
            align-self: flex-start;
            border-bottom-left-radius: 2px;
            border: 1px solid #cbd5e1;
            font-weight: 500;
        }

        .history-loading {
            text-align: center;
            font-size: 0.8rem;
            color: #94a3b8;
            padding: 5px;
            display: none;
        }

        .fa-flashing {
            animation: blinker 1s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }

        /* Original Page Component Styles */
        .navbar-custom {
            background-color: var(--primary-color);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            height: 60px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1050;
            transition: var(--transition);
        }

        .navbar-brand-custom {
            color: #ffffff;
            font-weight: 700;
            font-size: 1.25rem;
            letter-spacing: -0.5px;
            text-decoration: none;
        }

        .menu-trigger {
            color: #ffffff;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 8px;
            transition: var(--transition);
        }

        .menu-trigger:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .carousel-container {
            margin: 20px auto;
            max-width: 600px;
            padding: 0 15px;
        }

        .carousel-inner {
            border-radius: var(--radius-lg);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            background: #fff;
        }

        .carousel-item img {
            max-height: 75vh;
            object-fit: contain;
            width: 100%;
            border-radius: var(--radius-lg);
        }

        .carousel-indicators [data-bs-target] {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--primary-color);
            opacity: 0.3;
            margin: 0 5px;
        }

        .carousel-indicators .active {
            opacity: 1;
            width: 18px;
            border-radius: 4px;
            background-color: var(--primary-color);
            transition: var(--transition);
        }

        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: var(--primary-color);
            background-size: 50%;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .section-title {
            font-weight: 700;
            color: var(--primary-color);
            margin: 40px 0 20px;
            position: relative;
            display: inline-block;
        }

        .custom-accordion {
            max-width: 600px;
            margin: 0 auto 50px;
            padding: 0 15px;
        }

        .accordion-card {
            background: #ffffff;
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0,0,0,0.03);
            overflow: hidden;
            transition: var(--transition);
        }

        .accordion-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
        }

        .accordion-header-custom {
            padding: 18px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-dark);
            user-select: none;
        }

        .accordion-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: var(--transition);
        }

        .accordion-card.active .accordion-icon {
            transform: rotate(45deg);
            background-color: var(--primary-color);
            color: #ffffff;
        }

        .accordion-body-custom {
            display: none;
            padding: 0 20px 20px;
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
            border-top: 1px solid #f3f4f6;
            padding-top: 15px;
        }

        /* Bottom Sheet Modal Style */
        .modal-bottom-sheet .modal-dialog {
            position: fixed;
            margin: 0;
            width: 100%;
            max-width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-bottom-sheet.show .modal-dialog {
            transform: translateY(0);
        }

        .modal-bottom-sheet .modal-content {
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            border: none;
            max-height: 85vh;
            box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            border-bottom: 1px solid #f3f4f6;
            padding: 15px 20px;
            background: #ffffff;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modal-body {
            overflow-y: auto;
            padding: 20px;
            background-color: var(--bg-light);
        }

        .menu-list-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .menu-item-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 16px 20px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }

        .menu-item-card:hover {
            background-color: var(--primary-light);
            border-color: var(--accent-color);
            transform: translateX(4px);
        }

        .menu-item-icon {
            font-size: 1.35rem;
            color: var(--primary-color);
            width: 35px;
            text-align: center;
        }

        .menu-item-text {
            font-weight: 600;
            color: var(--text-dark);
            font-size: 1rem;
        }

        .content-section {
            background: #ffffff;
            border-radius: var(--radius-md);
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        }

        .content-title {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-light);
            padding-bottom: 10px;
        }

        .content-subtitle {
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 20px;
            margin-bottom: 8px;
            font-size: 1.05rem;
        }

        .content-p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .back-btn {
            background: none;
            border: none;
            color: var(--primary-color);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            cursor: pointer;
            padding: 5px 0;
        }

        .back-btn:hover {
            color: var(--accent-color);
        }

        a {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 500;
        }

        a:hover {
            text-decoration: underline;
        }

        /* နာမည်မေးသည့် Modal အတွက် Style အသစ် */
        .name-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .modal-card {
            background: white;
            width: 90%;
            max-width: 350px;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* ==========================================================================
           v2 (2026-09-27): bilingual toggle, HTML hero slides, Community Impact,
           Updates feed, footer. Chat styles above are untouched.
           ========================================================================== */
        :root {
            --gold: #BF9000;
            --gold-soft: #FFF6D8;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /* Language toggle: default Burmese; html[data-lang="en"] switches to English */
        html[data-lang="en"] .l-my { display: none !important; }
        html:not([data-lang="en"]) .l-en { display: none !important; }
        .l-my, body [lang="my"] {
            font-family: 'Noto Sans Myanmar', 'Padauk', 'Myanmar Text', 'Inter', sans-serif;
            line-height: 1.9;
        }

        .wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
        .section { margin: 48px auto 0; scroll-margin-top: 76px; }
        .section-head { text-align: center; margin-bottom: 22px; }
        .section-head h2 {
            font-weight: 700; color: var(--primary-color);
            font-size: clamp(1.35rem, 3.6vw, 1.85rem); margin: 0 0 6px;
        }
        .section-head p { color: var(--text-muted); margin: 0 auto; max-width: 640px; }

        /* Navbar: language switch */
        .nav-right { display: flex; align-items: center; gap: 8px; }
        .lang-switch {
            display: flex; background: rgba(255, 255, 255, 0.16);
            border-radius: 999px; padding: 3px;
        }
        .lang-switch button {
            border: 0; background: transparent; color: #fff; font-weight: 600;
            font-size: 0.82rem; padding: 5px 12px; border-radius: 999px;
            cursor: pointer; transition: var(--transition); line-height: 1.4;
        }
        .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--primary-color); }

        /* Hero (HTML slides inside the Bootstrap carousel) */
        .hero { margin: 18px auto 0; }
        .hero-carousel .carousel-inner {
            border-radius: 22px; box-shadow: var(--shadow); background: transparent;
        }
        .hero-slide {
            background: linear-gradient(135deg, #004d24 0%, #007a3a 100%);
            color: #fff; border-radius: 22px; padding: 34px 26px 60px;
            min-height: 420px; display: flex; flex-direction: column;
            justify-content: center; gap: 14px; position: relative; overflow: hidden;
        }
        .hero-slide::after {
            content: ""; position: absolute; right: -70px; top: -70px;
            width: 230px; height: 230px; border-radius: 50%;
            background: rgba(255, 255, 255, 0.06); pointer-events: none;
        }
        .hero-kicker {
            color: #ffd54a; font-weight: 600; letter-spacing: 0.05em;
            font-size: 0.82rem; text-transform: uppercase;
        }
        .hero-slide h2 { font-weight: 700; font-size: clamp(1.5rem, 4.6vw, 2.2rem); margin: 0; }
        .hero-slide p { margin: 0; color: rgba(255, 255, 255, 0.92); }
        .hero-brand { display: flex; align-items: center; gap: 14px; }
        .hero-brand img {
            width: 64px; height: 64px; border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.7); object-fit: cover; background: #fff;
        }
        .hero-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
        .hero-list li {
            background: rgba(255, 255, 255, 0.1); border-radius: 12px;
            padding: 10px 14px; display: flex; gap: 10px; align-items: flex-start;
        }
        .hero-list b { color: #ffd54a; flex: 0 0 auto; }
        .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; }
        .stat { background: rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 14px 10px; text-align: center; }
        .stat .num { font-size: 1.5rem; font-weight: 700; color: #ffd54a; line-height: 1.2; white-space: nowrap; }
        .stat .num .cur { font-size: 0.62em; margin-right: 1px; }
        .stat .lbl { font-size: 0.82rem; opacity: 0.92; }
        .hero-note { font-size: 0.78rem; opacity: 0.75; }
        .dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
        .dept { background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px 12px; }
        .dept b { display: block; color: #ffd54a; font-size: 0.92rem; }
        .dept span { font-size: 0.82rem; opacity: 0.92; }
        .slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
        .qr-box { background: #fff; padding: 8px; border-radius: 12px; display: inline-block; line-height: 0; }
        .hero-carousel .carousel-indicators { margin-bottom: 16px; }
        .hero-carousel .carousel-indicators [data-bs-target] { background: #fff; opacity: 0.45; }
        .hero-carousel .carousel-indicators .active { opacity: 1; background: #fff; }
        .hero-carousel .carousel-control-prev-icon,
        .hero-carousel .carousel-control-next-icon { background-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
        .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { width: 12%; }

        /* Buttons */
        .btn-cta {
            display: inline-flex; align-items: center; gap: 8px; background: var(--primary-color);
            color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600;
            text-decoration: none; align-self: flex-start; transition: var(--transition);
            border: 0; font-size: 0.95rem;
        }
        .btn-cta:hover { background: #00431f; color: #fff; transform: translateY(-1px); }
        .btn-cta.yt { background: #c4302b; }
        .btn-cta.yt:hover { background: #a32521; }
        .btn-cta.vb { background: #7360f2; }
        .btn-cta.vb:hover { background: #5b49d6; }
        .btn-cta.gold { background: #ffd54a; color: #3b2f00; }
        .btn-cta.gold:hover { background: #ffe07a; color: #3b2f00; }

        /* Community Impact */
        .impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 18px; }
        .impact-card {
            background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--shadow);
            border: 1px solid rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 12px;
        }
        .impact-icon {
            width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
            font-size: 1.4rem; background: var(--primary-light); color: var(--primary-color);
        }
        .impact-icon.yt { background: #fdecea; color: #c4302b; }
        .impact-icon.vb { background: #efecff; color: #7360f2; }
        .impact-card h3 { font-size: 1.12rem; font-weight: 700; margin: 0; }
        .impact-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
        .impact-num { font-size: 1.9rem; font-weight: 800; color: var(--primary-color); line-height: 1.2; }
        .impact-num small { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
        .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .mini-stat { background: var(--gold-soft); border-radius: 12px; padding: 10px 6px; text-align: center; }
        .mini-stat b { display: block; color: #7a5b00; font-size: 1.02rem; line-height: 1.3; }
        .mini-stat span { font-size: 0.72rem; color: #6b5a1f; line-height: 1.4; display: block; }
        .impact-card ul { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.93rem; display: grid; gap: 6px; }
        details.more summary {
            cursor: pointer; color: var(--primary-color); font-weight: 600; list-style: none; font-size: 0.93rem;
        }
        details.more summary::-webkit-details-marker { display: none; }
        details.more summary .caret { display: inline-block; transition: var(--transition); margin-left: 4px; }
        details.more[open] summary .caret { transform: rotate(90deg); }
        details.more ul { margin-top: 10px; }

        /* Updates feed */
        .updates-list { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
        .update-card {
            background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow);
            border-left: 5px solid var(--gold); display: grid; gap: 8px;
        }
        .update-date {
            font-size: 0.78rem; font-weight: 700; color: #7a5b00; background: var(--gold-soft);
            display: inline-block; padding: 3px 10px; border-radius: 999px; justify-self: start;
        }
        .update-card h3 { font-size: 1.05rem; margin: 0; font-weight: 700; }
        .update-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
        .update-card img { width: 100%; border-radius: 12px; max-height: 340px; object-fit: cover; }
        .update-card a.link { color: var(--primary-color); font-weight: 600; text-decoration: none; }
        .update-card a.link:hover { text-decoration: underline; }

        /* FAQ (keeps the original accordion classes used by the page script) */
        .custom-accordion { max-width: 760px; }
        .accordion-body-custom p { margin-bottom: 0.6rem; }

        /* Footer */
        .site-footer { margin-top: 56px; background: var(--primary-color); color: #fff; padding: 36px 0 96px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
        .site-footer h4 { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: #ffd54a; }
        .site-footer a { color: #fff; text-decoration: none; opacity: 0.92; }
        .site-footer a:hover { opacity: 1; text-decoration: underline; }
        .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
        .footer-note { margin-top: 24px; font-size: 0.8rem; opacity: 0.75; }

        @media (min-width: 577px) {
            .hero-slide { padding-left: 64px; padding-right: 64px; }
        }
        @media (max-width: 576px) {
            .hero-slide { padding: 28px 18px 58px; min-height: 0; }
            .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { display: none; }
            .mini-stats { grid-template-columns: repeat(3, 1fr); }
        }
    
        /* ==========================================================================
           Sub pages (about.html / how-it-works.html) + About teaser on the home page
           ========================================================================== */
        .about-stack { display: grid; gap: 18px; }
        .about-stack .impact-card p { font-size: 1rem; line-height: 1.95; color: #333; }
        .about-stack h3.sub { font-size: 1.02rem; font-weight: 700; color: var(--primary-color); margin: 6px 0 0; }
        .about-stack ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; line-height: 1.9; color: #333; }
        .section-head h1 {
            font-weight: 700; color: var(--primary-color);
            font-size: clamp(1.45rem, 4vw, 2rem); margin: 0 0 6px;
        }
        .impact-card h2 { font-size: 1.12rem; font-weight: 700; margin: 0; }
        .crumb { margin: 18px auto 0; font-size: 0.92rem; }
        .crumb a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
        .crumb a:hover { text-decoration: underline; }
        .page-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
        .impact-card a.more-link { color: var(--primary-color); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
        .impact-card a.more-link:hover { text-decoration: underline; }

        .about-stack ul.job-list { margin: 0; padding-left: 1.3rem; display: grid; gap: 8px; line-height: 1.9; color: #333; }
        .job-cta { margin-top: 4px; }
        .job-images { display: grid; gap: 14px; }
        .job-images img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); }
        .job-images a { display: block; }
        .job-hint { font-size: 0.9rem; color: #666; margin: 0; }