/* ═══════════════════════════════════════════════════════
   TRƯỜNG MẦM NON ĐẠI HÒA — site.css
   Bootstrap 5.3 + Custom  |  Tiếng Việt
   ═══════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
    --camText: rgba(254,157,1,1);
    --redText: #e8401a;
    --primary-red: #e8401a; /* <-- Add it here on line 9 */
    --blueText: rgba(0,84,168,1);
    --blueTitle: #007bff;
    --green: #34a853;
    --greenXam: #1a9fa0;
    --navy: rgb(40, 84, 162);
    --navy-dk: rgb(28, 60, 120);
    --navy-lt: rgb(58, 108, 190);
    --footer-bg: rgb(0, 83, 159);
    --footer-dk: rgb(0, 62, 120);
    /*--red: #e8401a;*/
    --red-dk: #c73012;
    --gold: #f5a623;
    --teal: #1a9fa0;
    --dark: #111827;
    --muted: #6b7280;
    --light: #f4f6fa;
    --radius: 12px;
    --sh-sm: 0 2px 8px rgba(0,0,0,.18);
    --sh-md: 0 5px 16px rgba(0,0,0,.22);
    --sh-lg: 0 10px 28px rgba(0,0,0,.28);
    --sh-hover: 0 14px 32px rgba(0,0,0,.32);
    --topbar-h: 36px;
    --nav-height: 80px;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    color: var(--dark);
    overflow-x: hidden;
    background: #fff;
}

/* ── added HELPERS ── */
.card-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── TYPOGRAPHY HELPERS ── */
.eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--redText);
    margin-bottom: 8px;
}

.sec-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.25;
}

.sec-title,
.tintuc-sec .sec-title,
.album-sec .sec-title {
    color: rgba(0,84,168,1);
}

.gallery-title {
    color: #007bff;/*var(--mn-titleBlue);*/
}

.sec-bar {
    width: 38px;
    height: 3px;
    background: linear-gradient(90deg, var(--redText), var(--gold));
    border-radius: 2px;
    margin-top: 13px;
}

/* ── REVEAL ANIMATION ── */
.rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s, transform .6s;
}

    .rv.in {
        opacity: 1;
        transform: none;
    }


/* ════════════════════════════════
   TOPBAR
════════════════════════════════ */
.topbar {
    background: var(--navy-dk);
    color: rgba(255,255,255,.62);
    font-size: .78rem;
    padding: 6px 0;
    height: var(--topbar-h);
}

    .topbar a {
        color: rgba(255,255,255,.62);
        text-decoration: none;
        transition: color .2s;
    }

        .topbar a:hover {
            color: var(--gold);
        }


/* ════════════════════════════════
   NAVBAR
════════════════════════════════ */
.main-nav {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1040;
    height: var(--nav-height);
    box-shadow: var(--sh-md);
    transition: box-shadow .3s, background .3s;
    display: flex;
    align-items: center;
}

    .main-nav.scrolled {
        background: rgba(28, 60, 120, .97);
        box-shadow: var(--sh-lg);
        backdrop-filter: blur(6px);
    }

/* Brand / Logo */
.brand-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    /*width: 62px;
    height: 62px;*/
    border-radius: 10px;
    overflow: auto;
    flex-shrink: 0;
    /*background: rgba(255,255,255,.12);*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid;*/
}

    .brand-logo img {
        max-height: calc(var(--nav-height) * 0.86);
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }

.brand-logo-fallback {
    font-size: 2rem;
    line-height: 1;
}

.brand-text strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
}

.brand-text small {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
}

/* Nav list */
.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
}

    .nav-list > li {
        position: relative;
    }

        .nav-list > li > a {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 14px;
            height: var(--nav-height);
            font-size: .86rem;
            font-weight: 600;
            color: rgba(255,255,255,.85);
            text-decoration: none;
            white-space: nowrap;
            border-bottom: 3px solid transparent;
            transition: color .2s, border-color .2s, background .2s;
        }

            .nav-list > li > a:hover,
            .nav-list > li:hover > a,
            .nav-list > li > a.active {
                color: #fff;
                border-bottom-color: var(--gold);
                background: rgba(255,255,255,.06);
            }

.nav-caret {
    font-size: .6rem;
    opacity: .65;
    transition: transform .2s;
}

.nav-list > li:hover .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* CTA button in nav */
.btn-nav-cta {
    background: var(--redText) !important;
    color: #fff !important;
    border-radius: 6px !important;
    margin-left: 6px;
    height: auto !important;
    padding: 10px 18px !important;
    font-size: .83rem !important;
    border-bottom: none !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
}

    .btn-nav-cta:hover {
        background: var(--red-dk) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(232,64,26,.5) !important;
        border-bottom: none !important;
    }

/* Dropdown */
.nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff;
    border-top: 3px solid var(--gold);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--sh-lg);
    padding: 8px;
    min-width: 275px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 1060;
}

.nav-list > li:hover .nav-drop {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.drop-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--dark);
    transition: background .16s;
}

    .drop-item:hover {
        background: rgba(40,84,162,.07);
        color: var(--navy);
    }

.d-ic {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(40,84,162,.08);
}

.d-ic-gold {
    background: rgba(245,166,35,.14);
}

.d-ic-teal {
    background: rgba(26,159,160,.12);
}

.d-ic-red {
    background: rgba(232,64,26,.10);
}

.d-txt strong {
    display: block;
    font-size: .83rem;
    font-weight: 700;
}

.d-txt small {
    font-size: .71rem;
    color: var(--muted);
}

/* Hamburger */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: rgba(255,255,255,.85);
        border-radius: 2px;
        transition: all .3s;
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* Mobile nav */
@media (max-width: 991px) {
    .nav-list {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-dk);
        padding: 10px;
        box-shadow: var(--sh-lg);
        z-index: 1060;
    }

        .nav-list.open {
            display: flex;
        }

        .nav-list > li > a {
            padding: 12px 14px;
            height: auto;
            border-bottom: none;
            border-radius: 6px;
        }

            .nav-list > li > a:hover,
            .nav-list > li > a.active {
                background: rgba(255,255,255,.08);
                border-bottom: none;
            }

    .nav-drop {
        position: static;
        transform: none !important;
        border-radius: 8px;
        border-top: 2px solid var(--gold);
        opacity: 1;
        pointer-events: all;
        box-shadow: none;
        display: none;
        background: rgba(255,255,255,.05);
        margin: 4px 8px;
    }

    .nav-list > li.mob-open .nav-drop {
        display: block;
    }

    .drop-item {
        color: rgba(255,255,255,.82);
    }

        .drop-item:hover {
            background: rgba(255,255,255,.07);
            color: #fff;
        }

    .d-txt strong {
        color: rgba(255,255,255,.9);
    }

    .d-txt small {
        color: rgba(255,255,255,.5);
    }
}


/* ════════════════════════════════
   SECTION — GIỚI THIỆU
════════════════════════════════ */
.gioithieu-sec {
    padding: 80px 0;
    background: var(--light);
}

.gt-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .26s, box-shadow .26s;
}

    .gt-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh-hover);
    }

.gt-card-icon {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .gt-card-icon::after {
        content: '';
        position: absolute;
        bottom: -18px;
        right: -18px;
        width: 80px;
        height: 80px;
        background: rgba(245,166,35,.15);
        border-radius: 50%;
    }

.gt-card-body {
    padding: 22px 22px 14px;
    flex: 1;
}

    .gt-card-body h5 {
        font-family: 'Playfair Display', serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 10px;
    }

    .gt-card-body p {
        font-size: .83rem;
        color: var(--muted);
        line-height: 1.75;
        margin: 0;
    }

.gt-card-foot {
    padding: 14px 22px 20px;
    border-top: 1px solid #f0f2f5;
}

.gt-link {
    font-size: .81rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap .18s, color .18s;
}

    .gt-link:hover {
        gap: 9px;
        color: var(--redText);
    }


/* ════════════════════════════════
   SECTION — TIN TỨC SỰ KIỆN
════════════════════════════════ */
.tintuc-sec {
    /*padding-bottom: 30px;*/
    background: var(--light);
    /*border-bottom: 1px solid grey; */
}

@media (max-width: 768px) {
    .tintuc-sec {
        padding: 60px 0;
    }
}

@media (max-width: 576px) {
    .tintuc-sec {
        padding: 40px 0;
    }
}

.tt-badge-link {
    cursor: pointer;
    color: #fff;
}

.tt-card {
    background: #fff;
    border-radius: var(--radius);
    /* Đổ bóng mịn hơn */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .tt-card:hover, .tt-card:focus-within {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

.tt-thumb {
    aspect-ratio: 16 / 10; /* Tỉ lệ hiện đại hơn 192px cố định */
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

    .tt-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s;
        display: block;
    }

.tt-card:hover .tt-thumb img {
    transform: scale(1.06);
}

.tt-badge {
    position: absolute;
    top: 11px;
    left: 11px;
    background: var(--redText);
    color: #fff;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 50px;
}

    .tt-badge a { /* No used now */
        color: #fff;
        text-decoration: none;
    }

.tt-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tt-meta {
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.tt-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; /* Tăng size để nổi bật font serif */
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 12px;
    /* Giới hạn 2 dòng để đều layout */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tt-excerpt {
    font-size: 0.875rem; /* Chuẩn 14px giúp dễ đọc hơn 0.80rem */
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 14px;
    /* Giới hạn 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tt-link {
    font-size: .79rem;
    font-weight: 700;
    color: var(--redText);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .18s, color .18s;
    margin-top: auto;
}

    .tt-link:hover {
        gap: 8px;
        color: var(--red-dk);
    }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer {
    background: var(--footer-bg);
    color: rgba(255,255,255,.75);
}

.ft-top {
    padding: 45px 0 40px;
}

.ft-bot {
    background: rgba(0,0,0,.2);
    padding: 16px 0;
    font-size: .78rem;
    color: rgba(255,255,255,.35);
}

    .ft-bot a {
        color: rgba(255,255,255,.32);
        text-decoration: none;
        transition: color .2s;
    }

        .ft-bot a:hover {
            color: var(--gold);
        }

.ft-h {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}

    .ft-h::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 2px;
        background: var(--redText);
    }

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

    .ft-ul li {
        margin-bottom: 9px;
    }

    .ft-ul a {
        font-size: .83rem;
        color: rgba(255,255,255,.62);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color .2s, gap .18s;
    }

        .ft-ul a::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background: var(--gold);
            border-radius: 50%;
            flex-shrink: 0;
            opacity: .6;
            transition: opacity .2s;
        }

        .ft-ul a:hover {
            color: #fff;
            gap: 9px;
        }

            .ft-ul a:hover::before {
                opacity: 1;
            }

.ft-c p {
    font-size: .82rem;
    color: rgba(255,255,255,.62);
    line-height: 1.75;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .ft-c p i {
        color: var(--gold);
        margin-top: 2px;
        flex-shrink: 0;
    }

/* Footer social */
.soc {
    display: flex;
    gap: 9px;
    margin-top: 16px;
}

    .soc a {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
        text-decoration: none;
        transition: background .2s, color .2s, transform .2s;
    }

        .soc a:hover {
            background: var(--gold);
            color: var(--navy-dk);
            transform: translateY(-2px);
        }

/* Footer map button */
.btn-map {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px 18px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;
    color: rgba(255,255,255,.82);
    font-size: .80rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

    .btn-map:hover {
        background: var(--gold);
        color: var(--navy-dk);
        border-color: var(--gold);
        transform: translateY(-1px);
    }


/* ════════════════════════════════
   STICKY COMPONENTS
════════════════════════════════ */
.sticky-c {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

    .sticky-c.on {
        opacity: 1;
        pointer-events: all;
    }

.sc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: var(--sh-md);
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}

    .sc::before {
        content: attr(data-tip);
        position: absolute;
        right: 54px;
        top: 50%;
        transform: translateY(-50%) translateX(8px);
        background: rgba(17,24,39,.88);
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity .2s, transform .2s;
        pointer-events: none;
    }

    .sc:hover {
        transform: scale(1.12);
        box-shadow: var(--sh-lg);
    }

        .sc:hover::before {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

.sc-ph {
    background: var(--teal);
    color: #fff;
}

.sc-zl {
    background: #0068ff;
    color: #fff;
}

.sc-ml {
    background: var(--redText);
    color: #fff;
}

.sc-ph::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--teal);
    animation: scpulse 2.2s ease-out infinite;
}

@keyframes scpulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

/* Back to top */
#btt {
    position: fixed;
    bottom: 24px;
    right: 15px;
    z-index: 1020;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--sh-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .2s;
}

    #btt.on {
        opacity: 1;
        pointer-events: all;
    }

    #btt:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-lg);
        background: var(--navy-lt);
    }


/* ════════════════════════════════
   SHARED BUTTON STYLES
════════════════════════════════ */
.hbtn {
    border-radius: 6px;
    padding: 12px 26px;
    font-weight: 700;
    font-size: .87rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .22s;
    border: 2px solid transparent;
}

.hbtn-primary {
    background: var(--redText);
    color: #fff;
    box-shadow: var(--sh-md);
}

    .hbtn-primary:hover {
        background: var(--red-dk);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(232,64,26,.45);
    }

.hbtn-outline {
    background: transparent;
    border-color: var(--navy);
    color: var(--navy);
}

    .hbtn-outline:hover {
        background: var(--navy);
        color: #fff;
        transform: translateY(-2px);
    }


/* ════════════════════════════════
   UTILITY / KEYFRAMES
════════════════════════════════ */
@keyframes fd {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fu {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Scroll offset for sticky nav (anchor links) */
:target {
    scroll-margin-top: calc(var(--nav-height) + 12px);
}

.ps-breadcrumb a {
    color: var(--blueText);
    text-decoration: none;
    font-weight: 500;
}

.ps-breadcrumb .breadcrumb-item.active,
.ps-breadcrumb .ps-breadcrumb-title {
    color: var(--blueText);
}

.btn-back {
    border-color: blue;
    color: var(--navy);
}

    .btn-back:hover {
        background: var(--blueText);
        color: #fff;
    }

.ps-share {
    font-size: 0.85rem;
    color: #6b7280;
}

.ps-share-label {
    font-weight: 600;
    color: #6b7280;
}