/* ==========================================================================
   1. CÀI ĐẶT CHUNG & BIẾN MÀU SẮC (BASE VARIABLES)
   ========================================================================== */
:root {
    /* FONTS */
    --title-font: 'Cormorant Garamond', serif; 
    --reading-font: 'Merriweather', serif;     
    --body-font: 'Lato', sans-serif;           

    /* COLORS MẶC ĐỊNH (WESTERN ZODIAC - XANH NGỌC) */
    --text-color: #333333;      
    --bg-color: #ffffff;        
    --bg-light: #fbfefd; 
    
    /* Các biến màu động (Sẽ thay đổi theo loại bài viết) */
    --bg-dark: #0f4c3a;         /* Xanh Ngọc */
    --bg-darker: #063f2e;       /* Xanh Rêu */
    --gold-color: #d4af37;      /* Vàng Kim */
    --copper-color: #b48b5e;    /* Màu Đồng */
    --pattern-img: none;
}

/* 2. CẤU HÌNH ĐỔI MÀU TỰ ĐỘNG (OVERRIDE VARIABLES) */

/* -> TỬ VI VIỆT NAM / 12 CON GIÁP (Tông Đỏ & Vàng) */
body.single-chinese_zodiac, 
body.post-type-archive-chinese_zodiac,
body.tax-chinese-category {
    --bg-dark: #8b0000;         /* Đỏ Chu Sa */
    --bg-darker: #580000;       /* Đỏ Rượu */
    --gold-color: #ffcc00;      /* Vàng Hoàng Kim */
    --copper-color: #d2691e;    /* Màu Đất Nung */
}

/* -> PHONG THỦY (Tông Nâu & Đất) */
body.page-template-template-fengshui {
    --bg-dark: #4e342e;         /* Nâu Đất */
    --gold-color: #c5a065;      /* Vàng Cát */
}

/* ==========================================================================
   3. RESET & LAYOUT CƠ BẢN (FIX LỖI CUỘN TRANG)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:wght@400;600;700&family=Merriweather:wght@300;400;700&family=Lato:wght@300;400;700&display=swap');

* { box-sizing: border-box; }

/* FIX QUAN TRỌNG: Để auto để không bị cắt nội dung */
html { height: auto; }

body { 
    display: flex; 
    flex-direction: column; 
    font-family: var(--body-font); 
    color: var(--text-color); 
    background-color: var(--bg-color); 
    line-height: 1.6; 
    margin: 0; padding: 0;
    
    /* Đảm bảo trang luôn cao ít nhất bằng màn hình */
    min-height: 100vh; 
    height: auto; 
    
    -webkit-font-smoothing: antialiased;
}

.site-content { flex: 1; width: 100%; }

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; position: relative; }

/* Tiêu đề chung */
.main-title { font-family: var(--title-font); font-size: 2.8rem; font-weight: 700; color: var(--bg-dark); text-align: center; margin: 0; }
.sub-title { display: block; text-align: center; text-transform: uppercase; letter-spacing: 3px; color: var(--copper-color); font-weight: 700; margin-bottom: 10px; font-size: 0.85rem; }
.divider-gold { width: 60px; height: 3px; background: var(--gold-color); margin: 15px auto; }

@media (max-width: 767px) {
    .container { padding-left: 10px; padding-right: 10px; }
}

/* assets/css/base.css - CẤU TRÚC LAYOUT CHÍNH */

/* Container chính giới hạn chiều rộng */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Khung bao quanh Nội dung + Sidebar */
/* Quan trọng: Class này giúp chia 2 cột */
.site-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px 0;
}

/* Cột Nội dung chính (Chiếm phần còn lại) */
.content-area {
    flex: 1; 
    min-width: 0; /* Ngăn vỡ layout */
}

/* Cột Sidebar (Cố định 300px) */
.widget-area, .sidebar-main {
    width: 320px;
    flex-shrink: 0; /* Không bị co lại */
}

/* Mobile Responsive: Chuyển thành 1 cột */
@media (max-width: 900px) {
    .site-content-container {
        flex-direction: column;
    }
    .widget-area, .sidebar-main {
        width: 100%;
    }
}