/* ==========================================================================
   กลุ่มงานเทคโนโลยีสารสนเทศ — Design System v5
   สไตล์: Medical / Government — น้ำเงินเข้ม + ทอง | Clean & Professional
   ========================================================================== */

:root {
    /* ─── Colors ─── */
    --primary:        #1E3A8A;
    --primary-dark:   #0C1A4F;
    --primary-light:  #DBEAFE;
    --gold:           #F59E0B;
    --gold-dark:      #D97706;
    --gold-light:     #FEF3C7;
    --red:            #B91C1C;
    --white:          #FFFFFF;
    --surface:        #F0F4FF;
    --surface-2:      #DBEAFE;
    --text:           #1A202C;
    --text-muted:     #5A6476;
    --border:         #D4D8E1;
    /* ─── Gradients ─── */
    --g-primary:      linear-gradient(135deg, #0C1A4F 0%, #1E3A8A 100%);
    --g-gold:         linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    --g-card-top:     linear-gradient(90deg, #1E3A8A 0%, #F59E0B 100%);
    /* ─── Shadows ─── */
    --shadow-xs:      0 1px 3px rgba(0,0,0,.05);
    --shadow-sm:      0 2px 8px rgba(30,58,138,.08);
    --shadow:         0 4px 16px rgba(30,58,138,.13);
    --shadow-hover:   0 12px 32px rgba(30,58,138,.20);
    --shadow-gold:    0 6px 20px rgba(245,158,11,.30);
    /* ─── Radius ─── */
    --radius:         8px;
    --radius-sm:      5px;
    --radius-lg:      14px;
    --radius-xl:      22px;
    /* ─── Motion ─── */
    --ease:           all .22s ease;
    --ease-card:      all .3s cubic-bezier(.4,0,.2,1);
    /* ─── Typography ─── */
    --font-h:         'Kanit', sans-serif;
    --font-b:         'Kanit', sans-serif;
    --font-heading:   'Kanit', sans-serif;
    /* ─── Compat ─── */
    --mp-secondary:      #1D4ED8;
    --mp-tertiary-dark:  #0C1A4F;
}

/* ── Base ─────────────────────────────── */
body { font-family: var(--font-b); color: var(--text); background: var(--white); line-height:1.75; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); font-weight:500; color: var(--text); }
a { color: var(--primary); text-decoration:none; transition: var(--ease); }
a:hover { color: var(--gold-dark); }

/* ── Buttons ──────────────────────────── */
.btn-primary { background: var(--primary); border-color: var(--primary); color:#fff; border-radius: var(--radius-sm); font-family: var(--font-h); padding:.5rem 1.5rem; }
.btn-primary:hover,.btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow:0 4px 12px rgba(30,58,138,.35); color:#fff; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); border-radius: var(--radius-sm); font-family: var(--font-h); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color:#fff; border-radius: var(--radius-sm); font-family: var(--font-h); padding:.5rem 1.5rem; }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color:#fff; box-shadow:0 4px 12px rgba(201,168,76,.35); }

/* ── Top Bar ──────────────────────────── */
.mp-topbar { background: var(--primary-dark); color:rgba(255,255,255,.85); padding:5px 0; font-size:.82rem; border-bottom:2px solid var(--gold); }
.mp-topbar a { color:rgba(255,255,255,.8); }
.mp-topbar a:hover { color: var(--gold); }
.mp-topbar .social-icons a { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:3px; background:rgba(255,255,255,.12); margin-left:4px; font-size:.75rem; }
.mp-topbar .social-icons a:hover { background: var(--gold); color:#fff; }

/* Mobile color strip */
.mp-color-strip { height:4px; display:flex; }
.mp-color-strip .strip-teal  { flex:2; background: var(--primary); }
.mp-color-strip .strip-orange { flex:1; background: var(--gold); }
.mp-color-strip .strip-blue  { flex:1; background: var(--red); }

/* (old mp-header/mp-nav-row styles removed — replaced by site-header in NavbarWidget) */

/* ── Hero ─────────────────────────────── */
.mp-hero { background: var(--primary-dark); overflow:hidden; }
.mp-hero .carousel-item img {
    width:100%;
    height:480px;
    object-fit:cover;
    object-position:center;
    display:block;
}
@media (max-width:991.98px) {
    .mp-hero .carousel-item img { height:320px; }
}
@media (max-width:575.98px) {
    .mp-hero .carousel-item img { height:220px; }
}
.mp-hero-placeholder {
    min-height:400px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #1D4ED8 100%);
    display:flex; align-items:center; justify-content:center;
    color:#fff; text-align:center; padding:3rem; position:relative; overflow:hidden;
}
.mp-hero-placeholder::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(201,168,76,.15) 0%, transparent 55%),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 20px,
            rgba(255,255,255,.025) 20px,
            rgba(255,255,255,.025) 21px
        );
}
.mp-hero-placeholder::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
}
.mp-hero-placeholder > div { position:relative; z-index:1; }
.mp-hero-placeholder h1 { font-family: var(--font-h); font-weight:600; color:#fff; font-size:2.25rem; margin-bottom:1rem; }
.mp-hero-placeholder h1 .accent { color: var(--gold); }
.mp-hero-placeholder p { font-size:1.05rem; color:rgba(255,255,255,.78); max-width:580px; margin:0 auto; }

/* ── Helpdesk Section ─────────────────── */
.it-helpdesk { padding:3rem 0; background: var(--surface); }
.it-helpdesk-card, .mp-section .mp-card.text-center {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:2rem 1.25rem; background:#fff;
    border:1px solid var(--border); border-radius: var(--radius-lg);
    transition: var(--ease-card); height:100%; border-top:3px solid transparent; box-shadow: var(--shadow-xs);
}
.it-helpdesk-card:hover, .mp-section .mp-card.text-center:hover {
    border-top-color: var(--gold); box-shadow: var(--shadow-hover); transform:translateY(-4px); border-color: rgba(201,168,76,.28);
}
.it-helpdesk-card .hd-icon { width:60px; height:60px; border-radius:50%; background: var(--gold-light); color: var(--gold-dark); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; transition: var(--ease); }
.it-helpdesk-card:hover .hd-icon { background: var(--gold); color:#fff; }
.it-helpdesk-card h5 { font-family: var(--font-h); font-size:1rem; color: var(--text); margin-bottom:.35rem; }
.it-helpdesk-card p { font-size:.82rem; color: var(--text-muted); margin:0; }

/* ── Quick Actions ────────────────────── */
.mp-quick-actions { background: var(--g-primary); padding:1.75rem 0; border-top:3px solid var(--gold); border-bottom:1px solid rgba(255,255,255,.07); }
.mp-quick-action-btn { display:flex; flex-direction:column; align-items:center; padding:.95rem .75rem; color:#fff; text-decoration:none; border-radius: var(--radius); transition: var(--ease); text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(4px); }
.mp-quick-action-btn:hover { background: var(--gold); color:#fff; transform:translateY(-3px); border-color: var(--gold-dark); box-shadow: var(--shadow-gold); }
.mp-quick-action-btn i { font-size:1.6rem; margin-bottom:.35rem; }
.mp-quick-action-btn span { font-family: var(--font-h); font-size:.78rem; }

/* ── Sections ─────────────────────────── */
.mp-section { padding:4rem 0; background: var(--white); }
.mp-section-light { background: var(--surface-2); }
.mp-section-title { font-family: var(--font-h); font-weight:600; font-size:1.55rem; margin-bottom:.3rem; padding-left:1.1rem; color: var(--primary-dark); }
.mp-section-subtitle { color: var(--text-muted); font-size:.92rem; margin-bottom:2rem; padding-left:1.1rem; }
.mp-section-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2rem; }
.mp-section-header .btn-view-all { font-family: var(--font-h); color: var(--primary); font-size:.85rem; white-space:nowrap; padding:.28rem .7rem; border:1px solid var(--primary); border-radius: var(--radius-sm); transition: var(--ease); }
.mp-section-header .btn-view-all:hover { background: var(--primary); color:#fff; }

/* ── Cards ────────────────────────────── */
.mp-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; transition: var(--ease-card); height:100%; border-top:3px solid transparent; position:relative; box-shadow: var(--shadow-xs); }
.mp-card:hover { box-shadow: var(--shadow-hover); transform:translateY(-4px); border-top-color: var(--gold); border-color: rgba(201,168,76,.28); }
.mp-card .card-img-top { height:190px; object-fit:cover; }
.mp-card .card-img-placeholder { height:190px; background: var(--surface-2); display:flex; align-items:center; justify-content:center; color: var(--primary); font-size:2.5rem; }
.mp-card .card-body { padding:1.25rem; }
.mp-card .card-title { font-family: var(--font-h); font-weight:500; font-size:1rem; color: var(--text); margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mp-card .card-text { font-size:.88rem; color: var(--text-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mp-card .card-meta { font-size:.78rem; color: var(--text-muted); margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.mp-card .card-meta i { color: var(--gold); margin-right:4px; }
.mp-card .card-arrow { position:absolute; bottom:1rem; right:1rem; width:28px; height:28px; border-radius: var(--radius-sm); background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; opacity:0; transform:translateX(-6px); transition: var(--ease); }
.mp-card:hover .card-arrow { opacity:1; transform:translateX(0); }

/* ── Service Cards ────────────────────── */
.mp-service-card { padding:1.75rem 1.5rem; background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); transition: var(--ease-card); height:100%; border-top:3px solid transparent; display:flex; flex-direction:column; align-items:flex-start; box-shadow: var(--shadow-xs); }
.mp-service-card:hover { box-shadow: var(--shadow-hover); transform:translateY(-4px); border-top-color: var(--gold); background: var(--gold-light); border-color: rgba(201,168,76,.3); }
.mp-service-card .service-icon { width:48px; height:48px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; transition: var(--ease); }
.mp-service-card:hover .service-icon { background: var(--gold); color:#fff; }
.mp-service-card h5 { font-family: var(--font-h); font-weight:500; font-size:1rem; margin-bottom:.4rem; }
.mp-service-card p { font-size:.84rem; color: var(--text-muted); margin:0; }
.system-card-link { text-decoration:none; color:inherit; display:block; height:100%; }
.system-card-link:hover { color:inherit; }
.service-icon-img { background:transparent; width:60px; height:60px; }
.mp-service-card.has-link { cursor:pointer; text-align:center; align-items:center; }
.system-ext-badge { display:inline-block; margin-top:.5rem; padding:.15rem .5rem; background: var(--primary-light); color: var(--primary); border-radius:3px; font-size:.72rem; font-family: var(--font-h); }
.mp-service-card:hover .system-ext-badge { background: var(--gold); color:#fff; }

/* ── Contact CTA ──────────────────────── */
.mp-contact-cta { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--mp-secondary) 55%, var(--primary) 100%); padding:4rem 0; color:#fff; text-align:center; border-top:4px solid var(--gold); position:relative; overflow:hidden; }
.mp-contact-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 15% 50%, rgba(201,168,76,.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 50%, rgba(201,168,76,.08) 0%, transparent 50%), repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(255,255,255,.012) 30px, rgba(255,255,255,.012) 31px); pointer-events:none; }
.mp-contact-cta h2 { font-family: var(--font-h); color:#fff; margin-bottom:1rem; }
.mp-contact-cta p { color:rgba(255,255,255,.78); margin-bottom:2rem; max-width:580px; margin-left:auto; margin-right:auto; }
.mp-contact-cta .btn { background: var(--gold); border-color: var(--gold); color:#fff; padding:.75rem 2rem; border-radius: var(--radius-sm); font-family: var(--font-h); font-weight:500; }
.mp-contact-cta .btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); color:#fff; }

/* ── Footer ───────────────────────────── */
.mp-footer { background: #0A1628; color:rgba(255,255,255,.55); padding:4rem 0 0; font-size:.88rem; border-top:4px solid var(--gold); }
.mp-footer h5 { font-family: var(--font-h); font-weight:500; color:#fff; margin-bottom:1.2rem; font-size:.88rem; text-transform:uppercase; letter-spacing:.8px; }
.mp-footer a { color:rgba(255,255,255,.45); text-decoration:none; transition: var(--ease); }
.mp-footer a:hover { color: var(--gold); }
.mp-footer ul { list-style:none; padding:0; margin:0; }
.mp-footer ul li { margin-bottom:.45rem; }
.mp-footer ul li a::before { content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-right:7px; font-size:.7rem; color: var(--gold); }
.mp-footer .footer-contact-item { display:flex; align-items:flex-start; margin-bottom:.7rem; }
.mp-footer .footer-contact-item i { color: var(--gold); margin-right:10px; margin-top:4px; min-width:16px; }
.mp-footer .social-icons a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius: var(--radius-sm); background:rgba(255,255,255,.07); color:rgba(255,255,255,.55); margin-right:6px; transition: var(--ease); }
.mp-footer .social-icons a:hover { background: var(--gold); color:#fff; }
.mp-footer .social-icons a::before { display:none; }
.mp-footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:1.2rem 0; margin-top:3rem; text-align:center; font-size:.78rem; color:rgba(255,255,255,.25); }

/* ── Page Banner ──────────────────────── */
.mp-page-banner { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); padding:2.5rem 0; color:#fff; border-bottom:4px solid var(--gold); position:relative; overflow:hidden; }
.mp-page-banner::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 90% 50%, rgba(201,168,76,.12) 0%, transparent 55%); pointer-events:none; }
.mp-page-banner h1 { font-family: var(--font-h); font-weight:600; color:#fff; margin-bottom:.5rem; }
.mp-page-banner .breadcrumb { background:transparent; margin-bottom:0; padding:0; }
.mp-page-banner .breadcrumb-item a { color:rgba(255,255,255,.65); }
.mp-page-banner .breadcrumb-item.active { color: var(--gold); }
.mp-page-banner .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.3); }

/* ── Downloads ────────────────────────── */
.mp-download-item { display:flex; align-items:center; padding:.85rem 1.25rem; background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm); margin-bottom:.55rem; transition: var(--ease); border-left:3px solid transparent; }
.mp-download-item:hover { border-left-color: var(--gold); box-shadow: var(--shadow); }
.mp-download-item .download-icon { width:42px; height:42px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-right:1rem; flex-shrink:0; }
.mp-download-item .download-info h6 { font-family: var(--font-h); font-weight:400; margin-bottom:.2rem; font-size:.92rem; }
.mp-download-item .download-info small { color: var(--text-muted); }
.mp-download-item .download-btn { flex-shrink:0; margin-left:1rem; }

/* ── Contact ──────────────────────────── */
.mp-contact-form { background:#fff; border-radius: var(--radius-lg); padding:2rem; box-shadow: var(--shadow); border-top:3px solid var(--primary); }
.mp-contact-info { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); border-radius: var(--radius-lg); padding:2rem; color:#fff; height:100%; border-top:3px solid var(--gold); }
.mp-contact-info h4 { color:#fff; font-family: var(--font-h); margin-bottom:1.5rem; }
.mp-contact-info .contact-item { display:flex; align-items:flex-start; margin-bottom:1.25rem; }
.mp-contact-info .contact-item i { color: var(--gold); margin-right:12px; margin-top:2px; min-width:20px; font-size:1rem; }
.form-control, .form-select { transition:border-color .2s, box-shadow .2s; }
.form-control:focus,.form-select:focus { border-color: var(--primary); box-shadow:0 0 0 .2rem rgba(30,58,138,.18); }

/* ── Pagination ───────────────────────── */
.pagination .page-link { color: var(--primary); border-radius: var(--radius-sm); margin:0 2px; border:1px solid var(--border); font-family: var(--font-h); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color:#fff; }
.pagination .page-link:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ── Article Detail ───────────────────── */
.mp-article-detail { max-width:800px; margin:0 auto; }
.mp-article-detail .article-cover { border-radius: var(--radius-lg); overflow:hidden; margin-bottom:2rem; }
.mp-article-detail .article-cover img { width:100%; height:auto; }
.mp-article-detail .article-meta { color: var(--text-muted); font-size:.88rem; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.mp-article-detail .article-meta i { color: var(--gold); margin-right:4px; }
.mp-article-detail .article-body { font-size:1.02rem; line-height:1.9; }
.mp-article-detail .article-body img { max-width:100%; border-radius: var(--radius); margin:1rem 0; }

/* ── About ────────────────────────────── */
.about-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
.about-tabs .nav-link { white-space:nowrap; color: var(--text-muted); font-family: var(--font-h); border:none; border-bottom:3px solid transparent; padding:.75rem 1.25rem; transition: var(--ease); }
.about-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--primary-light); }
.about-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background:transparent; }
.about-section-card { background:#fff; border-radius: var(--radius-lg); padding:2rem; box-shadow: var(--shadow); }
.about-section-card h3 { font-family: var(--font-h); font-size:1.3rem; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:2px solid var(--border); }
.about-highlight { font-size:1.05rem; font-weight:500; color: var(--primary); padding:1.25rem; background: var(--primary-light); border-radius: var(--radius); border-left:4px solid var(--primary); }
.about-body { font-size:1.02rem; line-height:1.9; }
.about-body li { margin-bottom:.5rem; }
.about-body h5 { font-family: var(--font-h); margin-top:1.5rem; }
.mp-subsection-title { font-family: var(--font-h); font-size:1rem; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--border); }
.mp-subsection-title i { color: var(--gold); }
.badge-status { padding:.3rem .7rem; border-radius:3px; font-family: var(--font-h); font-size:.78rem; }
.badge-published { background:#DBEAFE; color:#1E3A8A; }
.badge-draft { background:#FEF9C3; color:#A16207; }

/* ── Responsive ───────────────────────── */
@media (max-width:991.98px) {
    .mp-hero-placeholder { min-height:260px; }
    .mp-hero-placeholder h1 { font-size:1.55rem; }
    .mp-contact-cta { padding:3rem 0; }
    .mp-card .card-img-top,
    .mp-card .card-img-placeholder { height:165px; }
    .mp-section { padding:3rem 0; }
    .mp-footer { padding:3rem 0 0; }
}

@media (max-width:767.98px) {
    .mp-section { padding:2.5rem 0; }
    .mp-section-title { font-size:1.3rem; }
    .mp-section-header { flex-direction:column; gap:.6rem; align-items:flex-start; }
    .mp-page-banner { padding:1.5rem 0; }
    .mp-page-banner h1 { font-size:1.25rem; }
    .mp-hero-placeholder { min-height:200px; padding:2rem 1.25rem; }
    .mp-hero-placeholder p { font-size:.92rem; }
    .mp-contact-cta { padding:2.5rem 0; }
    .mp-contact-cta p { font-size:.92rem; margin-bottom:1.5rem; }
    .mp-download-item { flex-wrap:wrap; }
    .mp-download-item .download-btn { margin-left:auto; }
    .mp-quick-action-btn { padding:.75rem .5rem; }
    .mp-quick-action-btn i { font-size:1.35rem; }
    .mp-footer { text-align:center; }
    .mp-footer .footer-contact-item { justify-content:center; }
    .mp-footer-bottom { flex-direction:column; gap:.35rem; }
}

@media (max-width:575.98px) {
    .mp-section { padding:1.75rem 0; }
    .mp-section-title { font-size:1.15rem; }
    .mp-section-subtitle { font-size:.85rem; margin-bottom:1.25rem; }
    .mp-page-banner h1 { font-size:1.1rem; }
    .mp-hero-placeholder { min-height:170px; padding:1.5rem 1rem; }
    .mp-hero-placeholder h1 { font-size:1.2rem; margin-bottom:.6rem; }
    .mp-hero-placeholder p { font-size:.82rem; }
    .mp-contact-cta { padding:2rem 0; }
    .mp-contact-cta h2 { font-size:1.25rem; }
    .mp-download-item { flex-direction:column; align-items:flex-start; gap:.5rem; }
    .mp-download-item .download-icon { margin-right:0; }
    .mp-download-item .download-btn { margin-left:0; width:100%; text-align:center; }
    .mp-card .card-img-top,
    .mp-card .card-img-placeholder { height:160px; }
    .mp-service-card { padding:1.25rem 1rem; }
    .mp-service-card .service-icon { width:40px; height:40px; font-size:1.1rem; }
    .mp-contact-form,
    .mp-contact-info { padding:1.25rem; }
    .about-section-card { padding:1.25rem; }
}

/* ── Mobile / Tablet — Global Improvements ─────────────────────────────── */

/* Tighter container padding on very small phones */
@media (max-width:400px) {
    .container { padding-left:.75rem; padding-right:.75rem; }
    .mp-quick-action-btn { padding:.55rem .3rem; }
    .mp-quick-action-btn i { font-size:1.2rem; }
    .mp-quick-action-btn span { font-size:.7rem; }
    .mp-section-title { font-size:1.05rem; }
    .mp-page-banner h1 { font-size:1rem; }
}

/* Touch-friendly tap targets */
@media (max-width:991.98px) {
    .mp-section-header .btn-view-all { min-height:38px; display:inline-flex; align-items:center; padding:.4rem .9rem; }
    .btn, .btn-primary, .btn-outline-primary, .btn-gold { min-height:42px; }
}

/* Footer: stack columns and center on mobile */
@media (max-width:767.98px) {
    .mp-footer { padding:2.5rem 0 0; }
    .mp-footer .row > [class*="col-"] { margin-bottom:1.75rem; }
    .mp-footer ul li a::before { margin-right:5px; }
}
@media (max-width:575.98px) {
    .mp-footer h5 { font-size:.82rem; }
    .mp-footer ul li { margin-bottom:.35rem; font-size:.82rem; }
    .mp-footer .footer-contact-item { font-size:.82rem; }
    .mp-footer .social-icons { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem; }
    .mp-footer-bottom { font-size:.72rem; }
}

/* PDF thumbnail loading cover — hidden by default, show PDF directly */
.pdf-thumb-cover { display: none; }

/* ==========================================================================
   ✨ Visual Enhancement — Animations & Interactions
   ========================================================================== */

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s cubic-bezier(.22,.68,0,1.2), transform .6s cubic-bezier(.22,.68,0,1.2);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left  { opacity:0; transform:translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
.reveal-right { opacity:0; transform:translateX(30px);  transition: opacity .6s ease, transform .6s ease; }
.reveal-left.is-visible,
.reveal-right.is-visible { opacity:1; transform:translateX(0); }

/* Stagger delays for grid siblings */
.reveal-stagger > *:nth-child(1) { transition-delay:.00s; }
.reveal-stagger > *:nth-child(2) { transition-delay:.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay:.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay:.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay:.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay:.40s; }
.reveal-stagger > *:nth-child(n+7) { transition-delay:.48s; }

/* ── Card shimmer on hover ── */
.mp-card,
.mp-service-card,
.it-helpdesk-card {
    overflow: hidden;
}
.mp-card::after,
.mp-service-card::after,
.it-helpdesk-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg,
        transparent 40%,
        rgba(255,255,255,.28) 50%,
        transparent 60%
    );
    transform: translateX(-150%);
    transition: transform .55s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
}
.mp-card:hover::after,
.mp-service-card:hover::after,
.it-helpdesk-card:hover::after {
    transform: translateX(150%);
}

/* ── Hero placeholder — animated gradient orbs ── */
.mp-hero-placeholder {
    animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.mp-hero-placeholder::before {
    animation: orbFloat 10s ease-in-out infinite;
}
@keyframes orbFloat {
    0%,100% { opacity:.35; transform:scale(1) translateY(0); }
    50%      { opacity:.55; transform:scale(1.15) translateY(-12px); }
}

/* ── Section title — gradient left bar + underline grow ── */
.mp-section-title {
    position: relative;
    display: inline-block;
    padding-left: 1.1rem;
}
.mp-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: .14em;
    bottom: .14em;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
}
.mp-section-title::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    transition: width .6s ease .2s;
    border-radius: 99px;
}
.mp-section-title.is-visible::after { width: calc(100% - 1.1rem); }

/* ── Quick action active bounce ── */
.mp-quick-action-btn { transition: all .2s cubic-bezier(.34,1.56,.64,1); }
.mp-quick-action-btn:active { transform: scale(.9) translateY(0); }

/* ── Button ripple ── */
.btn-ripple { position:relative; overflow:hidden; }
.ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    transform: scale(0);
    animation: rippleAnim .65s linear forwards;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4.5); opacity: 0; }
}

/* ── Back-to-top ── */
.back-to-top {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    box-shadow: 0 4px 16px rgba(30,58,138,.40);
    cursor: pointer;
    z-index: 990;
    opacity: 0;
    transform: translateY(14px) scale(.85);
    transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1), background .2s;
    pointer-events: none;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--gold);
    box-shadow: 0 6px 20px rgba(201,168,76,.50);
    transform: translateY(-3px) scale(1.08);
}
.back-to-top:active { transform: scale(.92); }

/* ── Navbar shadow on scroll ── */
.site-header { transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.22) !important; }

/* ── Download item — slide-in left border ── */
.mp-download-item {
    position: relative;
    transition: all .25s ease, border-left-color .25s ease;
}
.mp-download-item::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: var(--gold);
    border-radius: 99px;
    transform: translateY(-50%);
    transition: height .25s ease;
}
.mp-download-item:hover::before { height: 60%; }

/* ── Stagger for quick action row ── */
.mp-quick-actions .row > [class*=col] { transition-delay: calc(var(--qi, 0) * .04s); }

/* ── Page entrance ── */
@keyframes pageFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
main > *:first-child { animation: pageFadeIn .5s ease both; }

/* ── Shimmer on ql-card ── */
.ql-card { position:relative; overflow:hidden; }
.ql-card::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(108deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
    transform:translateX(-150%);
    transition:transform .55s ease;
    pointer-events:none;
    border-radius:inherit;
}
.ql-card:hover::after { transform:translateX(150%); }

/* ── Gallery item — overlay slide up on hover ── */
.gallery-item__overlay {
    transition: padding .3s ease;
}
.gallery-item:hover .gallery-item__overlay { padding-bottom: 1.5rem; }

/* ── Download item enhanced hover ── */
.mp-download-item:hover .download-icon {
    background: var(--gold);
    color: #fff;
    transform: scale(1.1) rotate(-6deg);
    transition: all .25s ease;
}
.mp-download-item .download-icon { transition: all .25s ease; }

/* ── Pagination — smooth animation ── */
.pagination .page-link {
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.pagination .page-item.active .page-link {
    transform: scale(1.08);
}

/* ── News card image zoom ease ── */
.ni-card__thumb img,
.news-featured__img img,
.news-mini__thumb img { transition: transform .6s cubic-bezier(.22,.68,0,1.1); }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right,
    .mp-card::after, .mp-service-card::after, .ql-card::after,
    .back-to-top, .ripple-wave,
    .hero-compact__title, .hero-compact__desc { transition:none; animation:none; }
    .reveal { opacity:1; transform:none; }
}

/* PDF modal — mobile adjustments */
@media (max-width:575.98px) {
    .g-pdf-modal__head { padding:.5rem .85rem; gap:.5rem; }
    .g-pdf-modal__title { font-size:.76rem; }
    .g-pdf-modal__btn { font-size:.7rem; padding:.25rem .6rem; }
    .g-pdf-modal__close { width:1.7rem; height:1.7rem; font-size:.76rem; }
}

/* Page banner — reduce padding on tablet */
@media (max-width:991.98px) {
    .mp-page-banner { padding:1.75rem 0; }
    .mp-page-banner h1 { font-size:1.3rem; }
}

/* About tabs — horizontal scroll on mobile */
@media (max-width:575.98px) {
    .about-tabs { gap:0; }
    .about-tabs .nav-link { padding:.6rem 1rem; font-size:.84rem; }
}

/* Article body images — prevent overflow */
.mp-article-detail .article-body img { max-width:100% !important; height:auto !important; }
@media (max-width:575.98px) {
    .mp-article-detail .article-body { font-size:.95rem; }
    .mp-article-detail .article-meta { font-size:.82rem; flex-wrap:wrap; gap:.5rem; }
}