/**
 * Tệp CSS tùy chỉnh cho website hongbienduongpho.net (Phiên bản nâng cao)
 *
 * Hướng dẫn:
 * 1. Sao chép toàn bộ nội dung của tệp này.
 * 2. Dán vào ô "Tùy chỉnh CSS" trong trang quản trị WordPress của bạn.
 * 3. Nhấn "Lưu & chính sửa" và kiểm tra kết quả ngoài trang chủ.
 */

/* ==========================================================================
   0. BIẾN MÀU SẮC TRUNG TÂM (CSS VARIABLES FOR EASY THEMEING)
   ========================================================================== */
:root {
    --color-background: #f8f9fa; /* Màu nền chính */
    --color-surface: #ffffff;    /* Màu nền của các khối nội dung (bài viết, widget) */
    --color-text: #333333;       /* Màu chữ chính */
    --color-heading: #1a1a1a;     /* Màu tiêu đề */
    --color-primary: #d90429;    /* Màu nhấn (thương hiệu) */
    --color-primary-hover: #ef233c;
    --color-border: #eeeeee;      /* Màu viền */
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   1. CẢI THIỆN TRẢI NGHIỆM ĐỌC (TYPOGRAPHY & READABILITY)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body, button, input, textarea {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-background);
    color: var(--color-text);
}

.entry-content p, .single-post .post-content p {
    font-size: 17px;
}

.entry-content p + p {
    margin-top: 20px;
}

h1, h2, h3, h4, h5, h6, .entry-title a {
    font-weight: 700;
    color: var(--color-heading);
}

/* ==========================================================================
   2. TINH CHỈNH GIAO DIỆN HIỆN ĐẠI HƠN (MODERN UI POLISH)
   ========================================================================== */

img, .post-thumbnail, .wp-block-image img, iframe {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

article.post, .widget {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease-in-out;
    background-color: var(--color-surface);
    padding: 20px;
}

article.post:hover, .widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   3. CÁC CẢI TIẾN NHỎ KHÁC (MISCELLANEOUS IMPROVEMENTS)
   ========================================================================== */

.read-more-link, .btn, button, input[type="submit"] {
    background-color: var(--color-primary);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.read-more-link:hover, .btn:hover, button:hover, input[type="submit"]:hover {
    background-color: var(--color-primary-hover);
    color: #fff !important;
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
}

/* ==========================================================================
   4. ĐỊNH DẠNG CÁC THÀNH PHẦN NỘI DUNG (CONTENT ELEMENTS)
   ========================================================================== */

/* --- 4.1. Làm nổi bật các đoạn trích dẫn --- */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    font-size: 18px;
    color: #555;
    background-color: rgba(0,0,0,0.02);
    border-radius: 0 8px 8px 0;
    padding: 15px 20px;
}

/* --- 4.2. Định dạng chú thích ảnh --- */
figcaption, .wp-caption-text {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* ==========================================================================
   5. CẢI TIỆN VỀ TIẾP CẬN (ACCESSIBILITY)
   ========================================================================== */

/* --- 5.1. Hiển thị viền rõ nét khi dùng bàn phím --- */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   6. TÙY CHỈNH CHO THIẾT BỊ DI ĐỘNG (RESPONSIVE)
   ========================================================================== */

@media (max-width: 768px) {
    /* --- 6.1. Thêm khoảng đệm hai bên trên di động --- */
    body {
        padding: 0 10px;
    }

    /* --- 6.2. Điều chỉnh kích thước logo trên màn hình nhỏ --- */
    .site-branding img,
    .custom-logo-link img,
    [class*="logo"] img {
        max-height: 60px !important;
        width: auto !important;
    }
}