/*
Theme Name: Kids For Jesus
Theme URI: https://example.com/kids-for-jesus
Author: Marketing & Code Expert
Description: Theme tùy chỉnh cho Flashcards và Coloring Pages, chuẩn SEO và tốc độ cao.
Version: 2.0 (Cleaned)
*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* =========================================
   1. DESIGN SYSTEM (Màu sắc & Font)
   ========================================= */
:root {
    --color-primary: #067DC6;
    /* Xanh dương */
    --color-red: #FF383C;
    /* Đỏ (Button Coffee) */
    --color-green: #4CAF50;
    /* Xanh lá (Button Shop) */
    --color-yellow: #FFC107;
    /* Vàng (Highlight) */
    --font-heading: 'Sigmar', display;
    --font-body: "Signika Negative", sans-serif;
    --color-orange: #ED6023;
    /* Màu cam đậm giống ảnh */
}

html {
    scroll-behavior: smooth;
    /* Hiệu ứng cuộn trang mượt mà */
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #F8F8F8;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

/* =========================================
   2. HEADER & LOGO (Cấu hình chuẩn 76px/65px)
   ========================================= */

/* Thanh Header trắng nền */
.container-fluid.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    /* Tăng max-width để menu có không gian */
    margin: 0 auto;
    padding: 0 20px;
    height: 76px;
    /* Chiều cao cố định */
    position: relative;
}

.site-header-horizontal {
    background-color: white;
    height: 76px;
    /* Chiều cao cố định */
    position: -webkit-sticky;
    /* Hỗ trợ Safari cũ */
    position: sticky;
    /* Kích hoạt chế độ dính */
    top: 0;
    /* Điểm neo cho Logo */
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* transition: all 1s ease-in-out; */
}

body.admin-bar .site-header-horizontal {
    /* top: 32px; */
    /* Đẩy menu xuống dưới thanh Admin Bar */
}

.header-mobile-menu {
    /* display: none; */
    display: none;
    height: 100%;
}



@media screen and (max-width: 782px) {
    /* body.admin-bar .site-header-horizontal {
        top: 46px;
    } */


}

.floating-logo .custom-logo-link img {
    /* ... các thuộc tính cũ giữ nguyên ... */
    /* transition: all 0.2s ease; */
    /* Thêm dòng này */
}

/* LOGO: Căn giữa tuyệt đối so với màn hình */
.floating-logo {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 102;
    /* Nổi lên trên tất cả */
    /* line-height: 0; */

}

.site-header-horizontal.sticky-shrink .floating-logo {
    top: 50% !important;
    /* transition: transform 0.5s, width 0.2s linear, height 0.2s linear; */
    transition: transform 0.5s
}

.site-header-horizontal.sticky-shrink .floating-logo img {
    /* top: 50% !important; */
    width: 55px !important;
    height: 55px !important;
    transform: translateY(-50%);
    transition: transform 0.5s, width 0.2s linear, height 0.2s linear;
    /* transition: transform 0.5s, width 0.2s linear, height 0.2s linear; */


}

.floating-logo a {
    display: block;

}

.floating-logo img {
    height: 80px !important;
    /* Chiều cao cố định */
    width: auto;
    max-width: none;
}

/* Khung chứa nội dung 2 bên (Menu + Nút) */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    /* Full 76px */
    padding: 0 30px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 101;
}

/* Banner dưới Header */
.main-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   3. MENU NAVIGATION (Tách đôi)
   ========================================= */
.header-center-menu {
    /* flex: 1;  */
    display: flex;
    justify-content: center;
    /* QUAN TRỌNG: Căn giữa toàn bộ khối 2 menu */
    align-items: center;
    position: relative;
    flex: 1;
    gap: 80px;
}

.nav-left {
    width: 50%;
    justify-content: right;
    display: flex;
    margin-right: 50px;
    /* Nửa khoảng cách Logo */
}

.nav-right {
    /* margin-left: 75px; */
    width: 50%;
    justify-content: left;
    display: flex;

    /* Nửa khoảng cách Logo */
}

.menu-items {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-items-left {
    flex-direction: row;
    text-align: right;
}

.menu-items-right {
    flex-direction: row;
    /* Mặc định, không cần sửa */
    text-align: left;
}

/* Style cho Link Menu cấp 1 */
.menu-items>li>a {
    text-decoration: none;
    font-family: "Acme", sans-serif;
    color: #0088FF;
    font-weight: 400;
    font-size: 16px;
    padding: 0 21px;
    /* Khoảng cách giữa các chữ */
    height: 76px;
    /* Full chiều cao để dễ bấm */
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.menu-items>li>a:hover {
    color: var(--color-red);
}

/* KỸ THUẬT TÁCH MENU: Tạo khoảng trống cho Logo 65px */
/* Đẩy mục thứ 2 cách mục thứ 3 một khoảng 110px */
/* .menu-items>li:nth-child(2) {
    margin-right: 110px;
} */

/* =========================================
   4. MENU CON (DROPDOWN)
   ========================================= */
.menu-items li {
    position: relative;
    right: 0%;
}

li.menu-item-has-children>a::after {
    /* Code cho icon fa-chevron-down */
    content: "\f078";

    /* Cấu hình Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /* Quan trọng: Dùng cho icon Solid */
    display: flex;
    align-items: center;
    /* Định dạng icon */
    font-size: 10px;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.3s;
}

/* Tùy chọn: Xoay mũi tên khi di chuột qua */
.menu-items li.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

.sub-menu {
    display: none;
    text-align: left;
    position: absolute;
    top: 100%;
    /* Bắt đầu từ mép dưới menu cha */

    /* QUAN TRỌNG: Căn menu con BẮT ĐẦU từ mép trái của menu cha */
    transform: none;
    /* Bỏ transform để căn L:0 hoạt động */
    background-color: #ffffff;
    min-width: 200px;
    /* Giảm width để vừa với nội dung */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    list-style: none;
    z-index: 999;
    margin-top: 0;
}

/* Mũi tên nhỏ trang trí */
.sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;
    /* Di chuyển mũi tên sang góc trái */
    transform: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}

/* Hover hiện menu */
.menu-items li:hover .sub-menu {
    display: block;
    animation: slideUp 0.3s ease;
}

/* Link Menu Con */
.sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-weight: 400;
    font-size: 15px;
    font-family: "Acme", sans-serif;
    transition: all 0.2s;
}

.sub-menu a:hover {
    /* background-color: #E3F2FD; */
    color: var(--color-red);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
        /* Bỏ translate X */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* Bỏ translate X */
    }
}

/* =========================================
   5. HEADER BUTTONS (Nút Coffee & Shop)
   ========================================= */
/* Nút Trái: Coffee (Đỏ, Nhỏ) */
.header-left,
.header-right {
    width: 200px;
}

.header-right {
    display: flex;
    justify-content: right;
}

.btn-coffee-small {
    background-color: var(--color-red);
    color: white;
    padding: 10px 8px;
    border-radius: 10px;
    font-weight: 400;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: background 0.2s;
    width: fit-content;
}

.btn-coffee-small:hover {
    background-color: var(--color-yellow);
}

/* Nút Phải: Gift Shop (Icon xám) */
.btn-gift-link {
    color: #999;
    font-weight: 400;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 23px;
    transition: color 0.2s;
    width: fit-content;
}

.btn-gift-link span {
    padding: 8px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: #C7C7CC;
    border-radius: 50%;
}

.btn-gift-link i {
    font-size: 1.4rem;
    color: #AEAEB2;
}

/* .btn-gift-link:hover {
    color: var(--color-red);
} */

/* .btn-gift-link:hover span {
    background: var(--color-red);
} */

/* =========================================
   6. HOMEPAGE & CONTENT (Giữ nguyên)
   ========================================= */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #f4faff;
}

.hero-section h2 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

/* S.E.E.D Grid */
.mission-container {
    padding: 50px 20px;
    background: #fff;
}

.seed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 40px auto;
}

.seed-box {
    padding: 40px;
    border-radius: 20px;
    color: white;
}

.seed-box h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-top: 0;
}

.bg-red {
    background-color: #E53935;
}

.bg-green {
    background-color: #43A047;
}

.bg-blue {
    background-color: #1E88E5;
}

.bg-yellow {
    background-color: #FFC107;
    color: #333 !important;
}

.bg-yellow h3 {
    color: #333 !important;
}

/* Printables Grid */
.resources-section {
    background-color: #e3f2fd;
    padding: 60px 20px;
}

.printable-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}



.printable-card:hover {
    transform: translateY(-5px);
}

.printable-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.printable-title {
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 15px;
}

.btn-download {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
}

.btn-download:hover {
    color: var(--color-red);
}

/* Footer */
.site-footer {
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    padding: 40px 0;

}

.home-cards-section-mobile {
    display: none;
}


.home-cards-section {
    display: block;
}

/* =========================================
   7. RESPONSIVE (Mobile & Tablet)
   ========================================= */
@media (max-width: 992px) {
    .container {
        padding: 0 5px;
    }

    .site-header-horizontal {
        height: auto;
        padding: 10px 0;
    }

    .header-flex {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    /* Logo Mobile: Không center tuyệt đối nữa */
    .floating-logo {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 10px;
    }

    .floating-logo img {
        height: 60px;
    }

    /* Menu Mobile */
    .menu-items {
        flex-direction: column;
        width: 100%;
    }

    .menu-items>li>a {
        height: auto;
        padding: 10px 0;
        width: 100%;
        justify-content: center;
    }

    .menu-items>li:nth-child(2) {
        margin-right: 0;
    }

    /* Bỏ khoảng trống */

    /* Sub-menu Mobile */
    .sub-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: 1px solid #eee;
        width: 100%;
    }

    /* Grid Layout */
    .seed-grid {
        grid-template-columns: 1fr;
    }

    .printable-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-desktop-menu {
        display: none !important;
    }

    .header-mobile-menu {
        /* display: none; */
        display: block !important;
        position: relative;
    }

    .header-mobile-menu .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
    }

    .header-mobile-menu .mobile-right {
        display: flex;
        gap: 25px;
        align-items: center;

    }

    .mobile-logo img {
        max-width: 65px;
        height: auto;
    }

    .header-mobile-menu .mobile-right img {
        height: 25px;
        cursor: pointer;
    }

    .header-mobile-menu .mobile-right .menu-moblie-bar {
        display: block;
    }

    .header-mobile-menu .mobile-right .menu-moblie-close {
        display: none;
    }

    .header-mobile-menu .mobile-nav {
        position: absolute;
        top: calc(100% +10px);
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255);

        opacity: 0;
        visibility: hidden;
        /* transform: translateY(10px); */

        transition:
            opacity 0.35s ease,
            /* transform 0.35s ease, */
            visibility 0.35s ease;

        z-index: 999;
        padding: 0 20px;
    }

    .mobile-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .promise-top,
    .promise-bottom {
        flex-wrap: wrap;
    }

    /* .other-category-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        place-items: center;
    } */

    #worship-songs-page {
        padding: 0 10px;
    }

    .member-image-wrapper {
        flex-direction: column;
        height: auto !important;
        margin: 0 !important;
        justify-content: center;
        width: 100% !important;
    }

    .member-image-wrapper div {
        display: flex;
        justify-content: start;
        flex-direction: column;
    }

    .member-image-wrapper .member-name {
        width: 100%;
        text-align: center;
    }

    .featured-item {
        padding: 0 10px;
    }

    .footer-logo-social,
    .footer-nav {
        width: 100% !important;
        margin-top: 10px;
    }


    .home-cards-section {
        display: none;
    }

    .home-cards-section-mobile {
        display: block;
        padding: 0 10px;
    }

    .home-cards-section-mobile img {
        width: 100%;
        height: auto;

    }

    .printable-single-category-wrapper {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .print-category {
        height: 180px !important;
    }

    .print-category h3 {
        font-size: 40px !important;


    }


    .printable-other-categories .other-category-grid img {
        height: 160px;
        width: auto;
    }

    .footer-nav {
        display: none !important;
    }

    .custom-footer-logo-link {
        margin-bottom: 25px;
    }

    .intro-mission-section .intro-text {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }


    .member-description {
        text-align: justify !important;
    }


}

/* .mobile-nav {
    display: none;
    padding: 20px;
} */

/* .mobile-nav.active {
    display: block;
} */

.mobile-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* .mobile-menu-items li {
    border-bottom: 1px solid #eee;
} */

.mobile-menu-items li a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
}

/* Ngăn cách menu trái & phải */

@media (max-width: 480px) {
    .printable-grid {
        grid-template-columns: 1fr;
    }
}

.intro-mission-section {
    padding: 55px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Để cắt họa tiết thừa */
}

/* Họa tiết trang trí (Mây & Mặt trời) - Dùng ảnh nền mờ */
/* Bạn có thể thay url ảnh này bằng ảnh doodle mây/mặt trời của bạn */
.intro-mission-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://www.transparenttextures.com/patterns/notebook.png');
    /* Tạm dùng pattern giấy */
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.intro-content {
    position: relative;
    z-index: 1;
    /* Nổi lên trên nền */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mission-sun {
    position: absolute;
    right: 0;
    top: 80px;
}

.mission-sun img {
    width: 222px;
}

.mission-cloud {
    position: absolute;
    right: 270px;
    top: 140px;
}

.mission-sun img {
    width: 222px;
}

/* Icon tròn: PRAY GROW SING */
.mission-badge {
    width: 223px;
    height: auto;
    margin-bottom: 30px;
    border-radius: 50%;
    /* Nếu chưa có ảnh, dùng tạm hình tròn trắng viền vàng */
    /* background-color: white; */

    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
}

.mission-badge img {
    width: 100%;
    /* height: auto; */
    /* object-fit: cover; */
}

/* Tiêu đề chính */
.intro-title {
    /* 1. Font Family & Style */
    font-family: 'Sigmar', display;
    /* Đã có sẵn */
    font-weight: 400;
    font-style: normal;
    /* Regular */
    /* max-width: 1025px; */
    /* 2. Size & Line Height */
    font-size: 60px;
    /* Size to đúng chuẩn */
    line-height: 1.5;
    /* Tương đương 150% */

    /* 3. Spacing */
    /* Figma: -1.1% -> CSS: -0.011em */
    letter-spacing: -0.7px;

    /* 4. Color & Align */
    color: var(--color-orange);
    /* Giữ nguyên màu cam đã khai báo */
    text-align: center;
    /* text-transform: uppercase; */
    /* Viết hoa toàn bộ */

    /* 5. Margin (Căn chỉnh khoảng cách) */
    margin: 0 0 20px 0;
}

/* Responsive: Giảm size trên điện thoại để không bị tràn màn hình */
@media (max-width: 768px) {
    .intro-title {
        font-size: 36px;
        /* Mobile chỉ nên để tầm này là đẹp */
        line-height: 1.4;
    }
}

/* Đoạn văn mô tả */
.intro-text {
    font-family: 'Signika Negative', sans-serif;
    max-width: 1025px;
    /* 2. Weight & Style */
    font-weight: 300;
    font-style: normal;
    /* Regular */

    /* 3. Size & Line Height */
    font-size: 22px;
    line-height: 150%;
    /* Tương đương 1.5 */

    /* 4. Spacing */
    /* Figma: -1.1% -> CSS: -0.011em */
    letter-spacing: -0.011em;

    /* 5. Alignment & Color */
    text-align: center;
    color: #333;
    /* Màu chữ cơ bản (bạn có thể lấy mã màu chính xác từ Figma nếu có) */

    /* 6. Bố cục (Giữ nguyên để căn giữa đẹp) */

    margin: 30px auto 0;

}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .intro-title {
        font-size: 1.8rem;
        /* Giảm size chữ trên điện thoại */
    }

    /* .mission-badge {
        width: 100px;
        height: 100px;
    } */
}

/* =========================================
   9. HOME CARDS GRID SECTION
   ========================================= */

.home-cards-section {
    padding: 0;
}

.cards-grid-layout {
    display: flex;
    /* Dùng Flexbox thay vì Grid */
    flex-wrap: wrap;
    /* Cho phép xuống dòng khi hết chỗ */
    justify-content: center;
    /* QUAN TRỌNG: Căn giữa các thẻ (giúp hàng dưới 3 thẻ tự vào giữa) */
    gap: 30px;
    /* Khoảng cách giữa các thẻ */
    margin: 0 auto;
}

.card-item-png {
    flex: 0 0 auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Hiệu ứng hover nhấc nhẹ ảnh lên cho sinh động */
.card-item-png:hover {
    transform: translateY(-10px);
    /* Nhấc lên 10px */
    z-index: 10;
}

.card-item-png img {
    width: auto !important;
    height: 266px !important;
    display: block;
    /* Ảnh PNG đã đẹp rồi, ta chỉ cần bo góc nhẹ nếu ảnh gốc chưa bo */
    border-radius: 15px;
    /* Thêm bóng đổ nhẹ để nổi bật trên nền trắng */
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.card-item-png:hover img {
    /* Chạy animation tên là 'rungLac', kéo dài 0.8 giây, lặp vô tận */
    animation: rungLac 0.8s linear normal;
    /* Nếu chỉ muốn rung 1 lần rồi thôi thì dùng dòng dưới: */
    /* animation: rungLac 0.5s ease-in-out; */
}

@keyframes rungLac {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }



    20% {
        transform: translate(2px, 1px) rotate(1deg);
    }


    40% {
        transform: translate(2px, -1px) rotate(1deg);
    }



    60% {
        transform: translate(1px, 1px) rotate(0deg);
    }


    80% {
        transform: translate(2px, -1px) rotate(1deg);
    }



    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* RESPONSIVE */

/* Tablet: Chia 2 cột */
@media (max-width: 1200px) {
    .card-item-png img {
        height: 200px !important;
    }
}

@media (max-width: 768px) {
    .card-item-png img {
        height: 130px !important;

    }

    /* Trên mobile có thể tắt hiệu ứng rung nếu muốn nhẹ máy */
    /* .card-item-png:hover img { animation: none; } */
}

/* =========================================
   10. WELCOME & WATCH SECTION
   ========================================= */

.welcome-watch-section {
    padding: 100px 0 20px;
    position: relative;
    /* Để căn chỉnh con cá nền */
    overflow: hidden;

}

/* Họa tiết con cá (Fish Doodle) */
.fish-doodle {
    position: absolute;
    top: 25px;
    left: 10%;
    /* Vị trí tương đối giống ảnh */
    width: 126px;

    pointer-events: none;
    /* Không che mất nút bấm */
    z-index: 0;
}

.fish-doodle img {
    width: 100%;
    height: auto;
}

.welcome-content {
    position: relative;
    z-index: 1;
    /* Nổi lên trên hình nền */
    max-width: 910px;
    /* Giới hạn chiều rộng để dễ đọc */
    text-align: center;
    margin: 0 auto;
}

/* 1. Nút Watch đỏ */
.watch-btn-wrapper {
    margin-bottom: 30px;
}

.btn-watch {
    display: inline-block;
    background-color: #FF383C;
    /* Màu đỏ */
    color: white;
    font-family: 'Sigmar', display;
    font-size: 25px;
    font-weight: 400;
    padding: 10px 70px;
    border-radius: 12px;
    /* Bo góc mềm mại */
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(255, 61, 61, 0.3);
    transition: transform 0.2s, background 0.2s;
}

.btn-watch:hover {
    transform: translateY(-3px);
    background-color: #E53535;
    color: white;
}

/* 2. Tiêu đề chính */
.welcome-title {
    font-family: 'Sigmar', display;
    font-weight: 400;
    font-style: normal;

    /* Kích thước & Khoảng cách */
    font-size: 45px;
    line-height: 1;
    /* 100% trong Figma tương đương giá trị 1 trong CSS */
    letter-spacing: 0;
    /* 0% */
    text-align: center;

    /* Màu sắc & Margin (Giữ nguyên từ code cũ vì Figma chưa note màu) */
    color: #067DC6;
    /* Xanh dương Kids for Jesus */
    margin-top: 100px;
    margin-bottom: 16px;
}

/* 3. Trích dẫn màu xanh */
.welcome-quote {
    font-family: 'Signika Negative', sans-serif;
    /* Đổi Font */
    font-weight: 600;
    /* Đổi Weight: SemiBold (600) */

    /* Kích thước & Khoảng cách */
    font-size: 22px;
    /* Đổi Size từ 1.5rem (~24px) xuống 22px */
    line-height: 1;
    /* Đổi Line-height từ 1.4 xuống 1 (100%) */
    letter-spacing: 0;
    text-align: center;

    /* Màu sắc & Margin (Giữ nguyên) */
    color: #0E81D8;
    /* Xanh dương đậm */
    margin-bottom: 50px;
    padding: 0px 10px;
}

/* 4. Nội dung chi tiết */
.welcome-text-body p {
    font-family: 'Signika Negative', sans-serif;
    /* Font chuẩn */
    font-weight: 300;
    /* Light (300) */

    /* Kích thước & Khoảng cách */
    font-size: 22px;
    line-height: 1.3;
    /* Giữ 1.3 thay vì 1.0 */
    text-align: center;

    color: #444;
    /* Màu chữ hơi xám để dễ đọc */
    max-width: 800px;
    /* Giới hạn độ rộng để không quá dài */
    padding: 0px 10px;
}

.welcome-text-body strong {
    font-weight: 800;
    color: #000;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .welcome-title {
        font-size: 2rem;
    }

    .fish-doodle {
        width: 100px;
        left: 5%;
        top: 20px;
    }

    .btn-watch {
        font-size: 1.2rem;
        padding: 8px 30px;
    }
}

/* =========================================
   11. FEATURED CONTENT SECTION (DYNAMIC)
   ========================================= */

.featured-content-section {
    padding: 110px 0 84px;
    /* max-width: 973px; */
    position: relative;
}

.featured-item {
    display: flex;

    gap: 50px;
    margin-bottom: 80px;
}

/* Đảo ngược thứ tự cho các item chẵn */
.featured-item:nth-child(even) {
    flex-direction: row-reverse;
}

.item-thumb {
    flex: 0 0 50%;
    /* Ảnh chiếm 50% */
    max-width: 50%;
}

.item-thumb img,
.item-thumb .no-media-box {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.item-text {
    flex: 1 1 50%;
    /* Text chiếm 50% */
}

.item-heading {
    font-family: 'Sigmar', display;
    font-weight: 400;
    max-width: 80%;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
}

.featured-item:nth-of-type(odd) .item-heading {
    text-align: left !important;
    justify-content: left;
}

/* Chẵn = Right */
.featured-item:nth-of-type(even) .item-heading {
    text-align: right !important;
    justify-content: right;
    max-width: 100% !important;
}

.featured-item .item-text p {
    font-family: var(--font-body);
    /* Font chuẩn */
    font-weight: 300;
    /* Light (300) */
    font-style: normal;

    /* Kích thước & Khoảng cách */
    font-size: 22px;
    /* Chuẩn hóa về 22px */
    line-height: 1.3;
    /* 100% theo yêu cầu Figma */
    letter-spacing: 0;
    text-align: justify;
    /* Căn đều hai bên */
    font-style: normal;
    color: #000000;
    /* Giữ màu để dễ đọc */
    margin-bottom: 25px;
}

/* Nút Call to Action nhỏ (Đã có sẵn, nhưng đặt lại để đảm bảo) */
.btn-primary-small {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    font-family: var(--font-heading);
    padding: 10px 25px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background 0.3s;
    text-decoration: none;
    /* Quan trọng để bỏ gạch chân */
}

.btn-primary-small:hover {
    background-color: var(--color-red);
}

/* YOUTUBE EMBED FIX: Đảm bảo iframe Responsive (16:9) */
.video-embed-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flower-doodle {
    position: absolute;
    bottom: 0;
    right: 50px;
    /* Vị trí tương đối giống ảnh */
    width: 147px;

    pointer-events: none;
    /* Không che mất nút bấm */
    z-index: 0;
}

.flower-doodle img {
    width: 100%;
    height: auto;
}

.fish2-doodle {
    position: absolute;
    bottom: 30px;
    right: 20%;
    /* Vị trí tương đối giống ảnh */
    width: 126px;

    pointer-events: none;
    /* Không che mất nút bấm */
    z-index: 0;
}

.fish2-doodle img {
    width: 100%;
    height: auto;
}

/* RESPONSIVE: Xếp chồng (Stacking) trên Mobile */
@media (max-width: 992px) {
    .featured-item {
        flex-direction: column;
        /* Xếp chồng: Ảnh trên, Text dưới */
        margin-bottom: 60px;
        text-align: center;
    }

    .featured-item:nth-child(even) {
        flex-direction: column;
        /* Hủy bỏ lệnh đảo ngược cho mobile */
    }

    .item-thumb {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .item-text {
        padding: 0;
    }

    .item-heading {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .item-heading {
        font-size: 24px;
        /* Giảm nhẹ kích thước trên di động */
    }
}

/* =========================================
   12. NEW FOOTER SECTION
   ========================================= */

.site-footer {
    /* Bỏ padding-top và margin-top của footer cũ */
    margin-top: 0;
    padding: 0;
}

/* Thanh nền xanh dương lớn theo thiết kế */
.footer-blue-bg {

    padding: 12px 20px 12px;
    /* Khoảng cách lớn để chứa nội dung */
    position: relative;
    /* Dùng background pattern mờ tương tự header */

    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;

}

/* Layout chính: Căn giữa logo/menu, nút bấm dưới */
.footer-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 1. Logo & Menu & Social */
.footer-logo-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-bottom: 40px; */
}

/* Logo ở Footer */
.footer-logo-social .custom-logo-link img {
    height: 60px;
    /* Logo nhỏ hơn ở header */
    width: auto;
    margin-bottom: 25px;
}

.footer-logo-placeholder {
    color: white;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.footer-nav-wrapper {
    display: flex;
    justify-content: center;
    /* Căn giữa 2 khối menu */
    gap: 30px;
    /* Khoảng cách giữa Menu Left và Menu Right */
    margin-bottom: 35px;
    /* Khoảng cách xuống đến Social Icons */
}

/* Menu Footer ngang */
.footer-nav .menu-items {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    gap: 45px;
    /* Khoảng cách giữa các menu item */
    font-family: var(--font-body);
}

.footer-nav {
    display: flex;
    gap: 45px;
}

.footer-nav .menu-items a {
    color: #FFFFFF;
    font-weight: 400;
    font-size: 16px;
    padding: 5px 0;
    transition: color 0.2s;
    font-family: "Acme", sans-serif;
}

.footer-nav .sub-menu {
    display: none;
    text-align: left;
    position: absolute;
    top: 100%;
    /* Bắt đầu từ mép dưới menu cha */
    left: 50%;
    transform: translateX(-50%);
    /* QUAN TRỌNG: Căn menu con BẮT ĐẦU từ mép trái của menu cha */
    /* Bỏ transform để căn L:0 hoạt động */
    background-color: #ffffff;
    min-width: 200px;
    /* Giảm width để vừa với nội dung */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    list-style: none;
    z-index: 999;
    margin-top: 0;
    animation: none;
}

/* Mũi tên nhỏ trang trí */
.footer-nav .sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    /* Di chuyển mũi tên sang góc trái */
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}

.footer-nav .menu-items li:hover .sub-menu {
    display: block;
    animation: none;
    transition: all ease-in-out 0.3s;
}

.footer-nav .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-weight: 400;
    font-size: 15px;
    font-family: "Acme", sans-serif;
    transition: all 0.2s;
}



.footer-menu-items a:hover {
    color: var(--color-red);
}

/* Social Icons */
.footer-social-icons {
    display: flex;
    gap: 43px;
    margin-bottom: 40px;
}

.social-icon {
    font-size: 23px;
    /* Icon to nổi bật */
    width: 40px;
    height: 40px;
    background-color: white;
    color: var(--color-primary);
    /* Màu icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* 2. CTA Buttons */
.footer-cta-wrapper {
    display: flex;
    gap: 52px;
    justify-content: center;
    width: 100%;
}

.btn-footer-cta {

    /* Chiếm đều không gian */
    padding: 15px 6px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
}

.btn-footer-cta:hover {
    opacity: 0.9;
}

.btn-coffee {
    background-color: var(--color-red);
    color: white;
}

.btn-coffee:hover {
    background-color: var(--color-yellow);
}

.btn-gift-shop {
    background-color: #FFFFFF;
    color: #36AD51;
    padding: 15px 12px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;

}

.btn-gift-shop span {
    padding: 8px;
    display: flex;
    justify-items: center;
    align-items: center;
    border-radius: 50%;
    background: #36AD51;
}

.btn-gift-shop i {
    color: #19652B;
}

/* 3. Copyright Bar */
.footer-copyright-bar {
    background-color: #333;
    /* Màu đen hoặc xám đậm */
    padding: 15px 0;
    text-align: center;
}

.footer-copyright-bar p {
    color: #ccc;
    font-size: 0.9rem;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .footer-blue-bg {
        padding: 40px 15px 60px;
    }

    .footer-menu-items {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }

    .footer-cta-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .btn-footer-cta {
        font-size: 1.1rem;
    }

    .social-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
    }
}

.footer-logo-social .custom-footer-logo-link img {
    height: 60px;
    /* Kích thước logo footer */
    width: auto;
    margin-bottom: 0;
    /* margin-bottom: 10px; */
}


/* =========================================
   13. ABOUT & MISSION PAGE STYLES
   ========================================= */

/* 1. Phần Hero (Giới thiệu đầu trang) */
.about-hero-section {
    /* Nền xám nhạt */
    padding: 80px 0;
    text-align: center;
}

.about-hero-section .container {
    max-width: 900px;
}

.page-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.page-content-intro {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 40px;
}

.about-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 2. Phần Giá Trị Cốt Lõi */
.mission-values-section {
    padding: 80px 0;
    background-color: white;
}

.mission-values-section .section-heading {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--color-orange);
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.value-card {
    background-color: #FFFBEA;
    /* Nền vàng nhạt */
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.value-card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.value-card h3 {
    font-family: var(--font-heading);
    color: var(--color-red);
    margin-top: 0;
}

/* 3. CTA Banner (Kêu gọi hành động) */
.cta-banner {
    background: var(--color-primary);
    /* Nền xanh */
    color: white;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
}

.cta-banner p {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
}

.cta-banner .btn-primary {
    background: var(--color-red);
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-family: var(--font-heading);
    transition: transform 0.2s;
}

.cta-banner .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Responsive cơ bản */
@media (max-width: 900px) {
    .page-title {
        font-size: 3rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
        /* Chuyển thành 1 cột trên màn hình nhỏ */
    }
}

#about-mission .intro-text {
    text-align: justify;
    /* text-align: left; */
    /* font-size: 16px; */


}

/* #about-mission .intro-text p {
    text-align: left;
    font-size: 16px;

} */

b {
    font-weight: 600;
}

.promise-section .intro-title {
    font-size: 50px;
}

.intro-mission-section .join {
    max-width: 750px;

}

.intro-mission-section .join p {

    text-align: justify;
}

.intro-mission-section .promise-section {
    max-width: 950px;

}

.intro-mission-section .promise-section .promise-top {
    display: flex;
    margin-top: 70px;
    width: 100%;
    justify-content: start;
    gap: 50px;
}

.intro-mission-section .promise-section .promise-bottom {
    display: flex;
    margin-top: 65px;
    width: 100%;
    justify-content: end;
    gap: 50px;
}


/* Style cho nút Tải PDF chính trên trang chi tiết */
.btn-download-pdf {
    background-color: var(--color-red);
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    display: inline-block;
    transition: background 0.3s, transform 0.3s;
    margin-bottom: 30px;
    /* Thêm khoảng cách nếu cần */
}

.btn-download-pdf:hover {
    background-color: #d32f2f;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =========================================
   14. RECENT PRINTABLES SECTION (NEW)
   ========================================= */
.recent-printables-section {
    padding: 60px 0;

}

.section-heading-center {
    text-align: center;
    font-family: var(--font-heading);
    color: #067DC6;
    font-size: 50px;
    margin-bottom: 40px;
}

.printable-grid-list {
    display: grid;
    /* Mặc định 4 cột */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.printable-card-item {
    /* overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    overflow: hidden;
}

.printable-card-item .printable-card-item-image {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    transition: transform 0.3s;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* .printable-card-item .printable-card-item-image img {
    width: 100%;
    height: 100%;

} */

.printable-card-item .printable-card-item-image img:hover {
    transform: scale(1.03);
}



.printable-title-box {
    width: 100%;
    overflow: hidden;
}

.printable-card-title {
    font-family: "Signika Negative";
    font-weight: 400;
    font-size: 16px;
    margin: 10px 0 5px 0;

    display: block;
    /* Bắt buộc */
    width: 100%;
    /* Giới hạn chiều ngang */
    /* white-space: nowrap; */
    /* Chỉ 1 dòng */
    /* overflow: hidden; */
    /* Ẩn phần dư */
    /* text-overflow: ellipsis; */
    /* Hiện dấu ... */
}




/* Style cho Nút Tải Xuống (Mới) */
.btn-download-item {
    /* background-color: var(--color-green); */
    color: #077EC6;
    text-decoration: none;
    /* border-radius: 8px; */
    font-weight: 400;
    font-family: var(--font-heading);
    font-size: 16px;
    display: block;
    transition: background 0.3s;
}

.btn-download-item:hover {
    color: var(--color-red);
}

/* Responsive cho Grid */
@media (max-width: 1024px) {
    .printable-grid-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .printable-grid-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

#about-mission .fish2-doodle,

#worship-songs-page .fish2-doodle {
    left: 5%;
}

#about-mission .flower-doodle,
#worship-songs-page .flower-doodle {
    right: 5%;
}

/* =========================================
   15. SONGS LIST PAGE STYLES (CARD GRID)
   ========================================= */

.song-list-page-wrapper {
    padding: 60px 0;
    text-align: center;
    /* Căn giữa tiêu đề và mô tả */
}

.page-title-song {
    font-family: var(--font-heading);
    /* Dùng màu cam/đỏ nổi bật như trong ảnh */
    color: var(--color-orange);
    font-size: 3rem;
    margin-bottom: 10px;
}

.page-description-song {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

/* Container chính chuyển sang Grid 3 cột */
.song-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 86px;
    /* Khoảng cách giữa các cột */
    margin: 0 auto;
    margin-top: 90px;
}

.song-card-item {
    text-align: center;
    padding: 20px;
}



/* 1. Hình ảnh tròn */
.song-card-image-wrapper {
    display: inline-block;
    width: 200px;
    /* Kích thước ảnh cố định */
    height: 200px;
    margin: 0 auto 20px auto;
}

.song-card-image-style {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    /* Tròn hoàn toàn */

    box-shadow: 0 0 0 1px #FFF, 0 5px 20px rgba(0, 0, 0, 0.1);
    /* Hiệu ứng viền nổi */
}

.song-card-image-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Đảm bảo ảnh lấp đầy vòng tròn */
    display: block;
}

/* 2. Tiêu đề */
.song-card-title {
    font-family: var(--font-body);
    font-weight: 700;
    color: #555;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
}

.song-card-title a {
    color: inherit;
    text-decoration: none;
}

.song-card-title a:hover {
    color: var(--color-red);
}

/* 3. Nút Play/Download */
.song-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.btn-song-play,
.btn-song-download {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--color-orange);
    /* Dùng màu cam cho nút */
    background: white;
    color: var(--color-orange);
    font-size: 1.1rem;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btn-song-play:hover,
.btn-song-download:hover {
    background: var(--color-orange);
    color: white;
}

/* Tinh chỉnh nút Download để khớp với giao diện */
.btn-song-download {
    font-size: 0.9rem;
    /* Icon nhỏ hơn Play */
}

/* Responsive cho Grid */
@media (max-width: 900px) {
    .song-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .song-list-grid .song-card-item {
        border-right: 1px dashed #DDD;
    }

    .song-list-grid .song-card-item:nth-child(2n) {
        border-right: none;
    }

    .song-list-grid .song-card-item:last-child {
        border-right: none;
    }
}

@media (max-width: 600px) {
    .song-list-grid {
        grid-template-columns: 1fr;
    }

    .song-card-item {
        border-right: none !important;
        border-bottom: 1px dashed #DDD;
    }

    .song-list-grid .song-card-item:last-child {
        border-bottom: none;
    }
}

/* =========================================
   16. ALBUM VIDEO PAGE STYLES
   ========================================= */

.album-list-wrapper {
    padding: 60px 0;
    text-align: center;
}

.page-title-album {
    font-family: var(--font-heading);
    color: var(--color-red);
    font-size: 3rem;
    margin-bottom: 10px;
}

.page-description-album {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.album-grid-layout {
    display: grid;
    /* 3 cột trên desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin: 0 auto;
    width: 100%;
}

.album-card-item {
    border-radius: 12px;
    width: 275px;
    aspect-ratio: 1/1;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.5s;
}

.album-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.album-link-box {
    display: block;
    height: 100%;
    width: 100%;
}

.album-thumbnail-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.album-thumbnail-wrapper img {

    min-width: 100%;
    min-height: 100%;

}

/* .album-link-box:hover .album-thumbnail-wrapper img {
    transform: scale(1.05);
} */

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 3px solid white;
    transition: background 0.3s;
}

.album-link-box:hover .play-icon-overlay {
    background: rgba(255, 61, 61, 0.8);
    /* Đổi màu khi hover */
}

.album-card-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 15px 10px 5px 10px;
}

.album-card-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.album-card-title a:hover {
    color: var(--color-red);
}

.album-content-excerpt {
    color: #777;
    font-size: 0.95rem;
    padding: 0 15px;
}

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

@media (max-width: 600px) {
    .album-grid-layout {
        grid-template-columns: 1fr;
    }
}

.btn-primary-style {
    background-color: var(--color-primary);
    /* Xanh dương */
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-family: var(--font-heading);
    transition: background 0.2s, transform 0.2s;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(30, 136, 229, 0.4);
}

.btn-primary-style:hover {
    background-color: #1565C0;
    transform: translateY(-2px);
}

.song-subscribe {
    padding: 10px 25px !important;
}

.song-subscribe:hover {
    background: var(--color-yellow) !important;
}

/* =========================================
   17. TEAM MEMBERS COMPONENT STYLES (SINGLE FOCUS)
   ========================================= */

.team-members-component-section {
    padding: 80px 0;
    /* Tăng padding để làm nổi bật */

}

.team-list-wrapper {
    text-align: center;
}

.team-section-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.team-section-description {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* Bố cục cho Thẻ Đơn (Chỉ có 1 cột, rộng rãi) */
.team-members-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Luôn là 1 cột */
    max-width: 945px;
    /* Giới hạn chiều rộng cho thẻ */
    margin: 0 auto;
}

.member-card-item {
    /* background: #FFFFFF; */
    border-radius: 40px;
    padding: 30px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  */
    /* text-align: center; */
    border: 1px solid var(--color-orange);
    /* Viền nổi bật */

}

/* Tăng kích thước ảnh tròn */
.member-image-wrapper {
    width: 100%;
    /* height: 200px; */
    margin: 0 auto 25px auto;
    /* overflow: hidden; */
    display: flex;
    justify-content: start;
    gap: 20px;
    align-items: center;
    /* border: 6px solid var(--color-orange); 
    box-shadow: 0 0 0 4px #FFF; */
}

.member-image-wrapper img {
    width: 130px;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.member-name {
    font-family: var(--font-heading);
    color: #0088FF;
    font-size: 45px;
    font-weight: 400;
    margin: 0;
    text-align: left;
}

.member-designation {
    font-family: var(--font-body);
    font-weight: 400;
    color: #0088FF;
    font-size: 22px;
    margin-top: 5px;
}

.member-description {
    color: #000000;
    font-size: 22px;
    /* line-height: 1.8; */
    font-weight: 300;
    margin-top: 24px;
    font-family: var(--font-body);
    text-align: justify;
    /* Căn đều nội dung mô tả */
}

/* Responsive (Tùy chỉnh nhỏ) */
@media (max-width: 600px) {
    .member-image-wrapper {
        width: 150px;
        height: 150px;
    }

    .member-description {
        text-align: left;
    }
}


/* =========================================
   18. PRINTABLE ARCHIVE BY CATEGORY STYLES
   ========================================= */

.printable-archive-wrapper {
    padding: 60px 0;
    display: grid;
    /* Chia 2 cột: Sidebar lọc (1fr) và Nội dung chính (3fr) */
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    align-items: start;
}

.printable-archive-title {
    grid-column: 1 / -1;
    /* Chiếm hết 2 cột */
    font-family: var(--font-heading);
    color: var(--color-red);
    text-align: center;
    font-size: 3.2rem;
    margin-bottom: 5px;
}

.printable-archive-description {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* --- 1. Menu Lọc (Sidebar) --- */
.category-filter-nav {
    position: sticky;
    /* Giữ menu cố định khi cuộn */
    top: 30px;
    /* Cách đỉnh 30px */
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.filter-nav-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 1.3rem;
    border-bottom: 2px solid var(--color-yellow);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}

.category-filter-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-filter-nav li {
    margin-bottom: 8px;
}

.category-filter-nav a {
    text-decoration: none;
    color: #555;
    font-weight: 700;
    transition: color 0.2s;
    display: block;
    padding: 5px 0;
    border-radius: 4px;
}

.category-filter-nav a:hover {
    color: var(--color-red);
    background-color: #f7f7f7;
    padding-left: 5px;
}


/* --- 2. Nội dung chính --- */
.printable-category-sections {
    /* Đây là cột chính, không cần style đặc biệt */
}

.printable-category-group {
    margin-bottom: 50px;
    padding-top: 20px;
}

.category-group-title {
    font-family: var(--font-heading);
    color: var(--color-orange);
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 5px;
    border-bottom: 3px solid var(--color-orange);
    display: inline-block;
    padding-bottom: 5px;
}

.category-group-title a {
    text-decoration: none;
    color: inherit;
}

.category-group-info {
    color: #777;
    margin-bottom: 20px;
}

.printable-grid-by-category {
    display: grid;
    /* 4 cột trong nội dung chính */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.printable-card {
    /* Style của card đã có trong các phần trước */
    text-align: center;
}

.printable-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.printable-card img:hover {
    transform: translateY(-3px);
}

.printable-title-on-card {
    margin-top: 10px;
    font-family: var(--font-body);
    font-weight: 700;
}

.printable-title-on-card a {
    text-decoration: none;
    color: var(--color-primary);
}


/* Responsive */
@media (max-width: 1024px) {
    .printable-archive-wrapper {
        gap: 20px;
    }

    .printable-grid-by-category {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .printable-archive-wrapper {
        grid-template-columns: 1fr;
        /* 1 cột trên mobile */
        padding: 30px 20px;
    }

    .printable-archive-title,
    .printable-archive-description {
        grid-column: auto;
    }

    .printable-grid-by-category {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-filter-nav {
        position: static;
        /* Bỏ sticky trên mobile */
        margin-bottom: 20px;
    }
}

.print-category {
    height: 256px;
    background-color: #35AD50;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.print-category h3 {
    font-size: 70px;
    font-weight: 400;
    color: #FFFFFF;
    font-family: var(--font-heading);

}

.print-icon {
    background: #077EC6;
    position: relative;
    height: 48px;
}

.print-icon .print-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.printable-single-category-wrapper {
    padding: 125px 0;
}

/* GRID RESPONSIVE */
.printable-grid-category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

/* Tablet */
@media(max-width: 1024px) {
    .printable-grid-category-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media(max-width: 600px) {
    .printable-grid-category-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ITEM CARD */
.printable-card {
    /* background: #fff; */
    /* text-align: center; */
    /* padding: 10px; */
    /* border-radius: 10px; */
    overflow: hidden;
    transition: 0.3s;
}

.printable-card:hover {
    transform: none
}

/* IMAGE */
.printable-thumbnail img {
    width: 100%;
    border-radius: 10px;
    margin: 0;
}

/* CONTENT */
.printable-info {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.printable-title {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 5px;
    font-family: var(--font-body);
}

/* DOWNLOAD BUTTON */
.printable-download-btn {
    display: inline-block;
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    color: #077EC6;
    /* xanh hình */
    text-decoration: none;
    font-family: var(--font-heading);
}

.printable-download-btn:hover {
    color: var(--color-red);
}

/* LOAD MORE */
.loadmore-wrapper {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 100px;
}

#loadmore-btn {
    background: #FF383C;
    padding: 5px 45px;
    color: #fff;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-family: var(--font-heading);
    font-weight: 400;
    transition: .3s;
}

.loadmore-btn:hover {
    opacity: .8;
}

.printable-other-categories .other-category-grid {
    display: flex;
    /* grid-template-columns: repeat(2, 1fr);
    gap: 20px; */
    max-width: 1000px;
    justify-content: center;
    gap: 50px;
    margin: 40px auto;
}



.printable-other-categories .other-category-grid .other-category-card {
    width: 330px;
}

.printable-other-categories .other-category-grid .other-category-card img {
    max-width: 100%;
}

.printable-other-categories .other-category-grid .other-category-card h4 {
    margin-top: 20px;
    font-family: var(--font-heading);
    font-size: 25px;
    font-weight: 400;
    color: #0088FF;
}

.printable-card-item .printable-card-item-image img {
    width: 100%;
    height: auto;
}

/* Popup overlay */
.pdf-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Popup content */
.pdf-popup {
    background: white;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: popupOpen .3s ease;
}

@keyframes popupOpen {
    from {
        transform: scale(.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.pdf-popup iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: #ff4747;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.kfj-fullwidth.e-con>.e-con-inner {
    max-width: 100% !important;
    width: 100%;
}