/*
Theme Name: Tin Công Giáo
Theme URI: https://tinconggiao.com
Author: Quản trị viên
Description: Giao diện chuyên nghiệp, trang trọng dành riêng cho trang web Tin tức Công giáo. Giao diện được tối ưu hóa cho nội dung đức tin, thời sự Vatican và Giáo hội địa phương.
Version: 1.0
Text Domain: tinconggiao
Tags: blog, news, catholic, responsive-layout
*/

/* ==========================================================================
   TÙY CHỈNH CSS CƠ BẢN (Kế thừa từ bản HTML gốc)
   ========================================================================== */

/* Thiết lập Font chữ mặc định */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #F9F8F6; 
}

/* Thiết lập Font chữ có chân (Serif) cho các tiêu đề để tạo sự trang nghiêm */
h1, h2, h3, h4, h5, .font-serif { 
    font-family: '"Playfair Display"', serif; 
}

/* Hiệu ứng giới hạn số dòng hiển thị (Line-clamp).
   Rất hữu ích cho các đoạn sa-pô (mô tả ngắn) để giao diện luôn gọn gàng.
*/
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lưu ý: Do chúng ta đang sử dụng Tailwind CSS (sẽ được nhúng vào trong header.php hoặc functions.php), 
   nên file style.css này chủ yếu dùng để WordPress nhận diện Theme và chứa các CSS bổ sung.
*/
/* ==========================================================================
           2. CSS THỰC TẾ CHO FOOTER & POPUP (HÃY COPY TOÀN BỘ PHẦN NÀY VÀO FILE CSS CỦA BẠN)
           ========================================================================== */
        
        /* Giao diện Footer mẫu */
        .site-footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 30px 20px;
            text-align: center;
            border-top: 3px solid #367FA9;
        }
        .site-footer p {
            margin: 0 0 15px 0;
            font-size: 14px;
        }

        /* Nút bấm kết nối được đặt riêng trong Footer */
        .gplx-btn {
            display: inline-block;
            background-color: #367FA9;
            color: #ffffff !important;
            padding: 8px 18px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: bold;
            text-decoration: none !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: all 0.2s ease-in-out;
            border: none;
            cursor: pointer;
        }
        .gplx-btn:hover {
            background-color: #286090;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            color: #ffffff !important;
        }

        /* Lớp nền mờ phủ toàn màn hình */
        .gplx-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: none; /* Mặc định ẩn */
            align-items: center;
            justify-content: center;
            z-index: 99999; /* Đảm bảo nổi lên trên cùng mọi thành phần */
        }
        .gplx-modal-backdrop.gplx-show {
            display: flex; /* Kích hoạt khi có class .gplx-show */
        }

        /* Khung hộp thoại (Modal Dialog) */
        .gplx-modal-dialog {
            margin: 0 auto;
            max-width: 650px;
            width: 95%;
            background: #ffffff;
            border-radius: 6px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            overflow: hidden;
            animation: gplxSlideDown 0.2s ease-out;
        }

        @keyframes gplxSlideDown {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .gplx-modal-content {
            border: none;
            display: flex;
            flex-direction: column;
        }

        /* Header của popup */
        .gplx-modal-header {
            padding: 8px 12px;
            background: #367FA9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #286090;
        }

        .gplx-modal-header h4 {
            color: #ffffff;
            font-size: 15px;
            font-weight: bold;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .gplx-modal-header .gplx-close {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            opacity: 0.8;
            padding: 5px;
            line-height: 1;
            transition: opacity 0.15s;
        }
        .gplx-modal-header .gplx-close:hover {
            opacity: 1;
        }

        /* Thân của popup chứa danh sách giáo phận */
        .gplx-modal-body {
            padding: 15px;
            max-height: 70vh;
            overflow-y: auto;
            background: #ffffff;
        }

        /* Tiêu đề Giáo Tỉnh */
        .gplx-modal-body .gplx-title {
            font-size: 13px;
            font-weight: bold;
            color: #2c3e50;
            border-left: 3px solid #367FA9;
            padding-left: 8px;
            margin: 15px 0 8px 0;
            text-transform: uppercase;
            font-family: Arial, sans-serif;
        }
        .gplx-modal-body .gplx-title:first-child {
            margin-top: 0;
        }

        /* Danh sách dạng lưới (Responsive) */
        .gplx-modal-body .gplx-list {
            list-style: none;
            padding: 0;
            margin: 0 0 15px 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 8px;
        }

        .gplx-modal-body .gplx-list li {
            padding: 0;
            margin: 0;
        }

        .gplx-modal-body .gplx-list li a {
            color: #337ab7 !important;
            text-decoration: none !important;
            font-size: 13px;
            display: flex;
            align-items: center;
            transition: color 0.15s;
        }

        .gplx-modal-body .gplx-list li a:hover {
            color: #23527c !important;
            text-decoration: underline !important;
        }

        /* Footer của popup */
        .gplx-modal-footer {
            padding: 8px 12px;
            background: #21c0ff;
            border-top: 1px solid #eeeeee;
            text-align: right;
        }
        .gplx-modal-footer .gplx-btn-close {
            padding: 6px 14px;
            background: #21c0ff;
            color: skyblue;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.15s;
        }
        .gplx-modal-footer .gplx-btn-close:hover {
            background: #95a5a6;
        }
/* ===== LỊCH PHỤNG VỤ card ===== */
.tcg-lpv{ font-family: inherit; }
.tcg-lpv-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:10px 0 8px;
	border-bottom:1px solid rgba(148,163,184,.18);
}
.tcg-lpv-title{ font-weight:800; text-transform:uppercase; color:#22c55e; }
.tcg-lpv-nav button{
	width:32px;height:32px;border-radius:999px;
	border:1px solid rgba(148,163,184,.18);
	background:transparent;color:inherit; cursor:pointer;
}
.tcg-lpv-month{ padding:10px 0; font-weight:700; color:#22c55e; }

.tcg-lpv-week{
	display:grid; grid-template-columns:repeat(7,1fr);
	gap:6px; font-size:12px; opacity:.85;
}
.tcg-lpv-week > div{ text-align:center; padding:6px 0; }

.tcg-lpv-grid{
	display:grid; grid-template-columns:repeat(7,1fr);
	gap:6px; padding-top:8px;
}
.tcg-lpv-cell{
	height:34px; border-radius:10px;
	display:flex; align-items:center; justify-content:center;
	border:1px solid rgba(148,163,184,.18);
	background:transparent; color:inherit;
}
.tcg-lpv-cell.is-empty{ border:none; background:transparent; }
.tcg-lpv-day{ cursor:pointer; }
.tcg-lpv-day.has-data{ border-color: rgba(34,197,94,.35); }
.tcg-lpv-day.is-today{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.55); }

/* ===== Modal ===== */
.tcg-lpv-modal[hidden]{ display:none; }
.tcg-lpv-modal{ position:fixed; inset:0; z-index:9999; }
.tcg-lpv-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.tcg-lpv-modal-card{
	position:relative;
	max-width:560px; width:calc(100% - 24px);
	margin:60px auto 0;
	background:#0b1220;
	border:1px solid rgba(148,163,184,.18);
	border-radius:14px;
	overflow:hidden;
}
.tcg-lpv-modal-head{
	display:flex; justify-content:space-between; align-items:center;
	padding:12px 14px;
	border-bottom:1px solid rgba(148,163,184,.18);
}
.tcg-lpv-modal-title{ font-weight:800; }
.tcg-lpv-modal-close{
	border:1px solid rgba(148,163,184,.18);
	background:transparent; color:inherit;
	border-radius:10px; padding:6px 10px; cursor:pointer;
}
.tcg-lpv-modal-body{ padding:12px 14px; }
.tcg-lpv-field{ margin:10px 0; line-height:1.5; }
.tcg-lpv-empty{ margin-top:12px; color:#fca5a5; font-weight:700; }
/* ===== FIX POPUP LỊCH PHỤNG VỤ: NỀN TRẮNG + GIỮA MÀN HÌNH ===== */

/* backdrop giữ tối nhẹ cho nổi popup */
.tcg-lpv-modal-backdrop{
	background: rgba(0,0,0,.45) !important;
}

/* đưa card ra giữa màn hình */
.tcg-lpv-modal-card{
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;

	margin: 0 !important;              /* bỏ margin cũ 60px */
	max-width: 560px;
	width: calc(100% - 24px);

	background: #fff !important;       /* nền trắng */
	color: #0f172a !important;         /* chữ tối */
	border: 1px solid #e5e7eb !important;
	border-radius: 14px;
	overflow: hidden;
}

/* header popup */
.tcg-lpv-modal-head{
	border-bottom: 1px solid #e5e7eb !important;
}

/* nút đóng */
.tcg-lpv-modal-close{
	border: 1px solid #e5e7eb !important;
	background: #fff !important;
	color: #0f172a !important;
}

/* text trong body */
.tcg-lpv-modal-body{
	color: #0f172a !important;
}

/* dòng "Dữ liệu chưa có" */
.tcg-lpv-empty{
	color: #dc2626 !important;
}
/* ===== LỊCH: header kiểu cn-cb + dòng tháng cùng hàng nút ===== */
.tcg-lpv-top{ margin-bottom: 10px; }

/* Dòng tháng + nav */
.tcg-lpv-month-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
	padding: 8px 0 10px;
	border-bottom: 1px solid #e5e7eb;
}

.tcg-lpv-month{
	padding: 0;                /* bỏ padding cũ */
	margin: 0;
	font-weight: 800;
	color: #0f172a;
}

.tcg-lpv-nav{
	display:flex;
	gap: 6px;
	flex-shrink: 0;
}

.tcg-lpv-nav button{
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
}

/* Nếu bạn đang có CSS cũ cho .tcg-lpv-head thì có thể bỏ luôn */
.tcg-lpv-head{ display:none; }
.cn-fb-wrap{
	width: 100%;
}