/*
Theme Name: Horoscope Pro
Theme URI: https://example.com/
Author: Gemini
Description: Theme Tu Vi Style Line Art - V22.0 (Full Elements Module & PC Sidebar Fix)
Version: 22.0
*/

/* ==========================================================================
   1. CÀI ĐẶT CHUNG & TYPOGRAPHY SANG TRỌNG
   ========================================================================== */
:root {
    --title-font: 'Cormorant Garamond', serif; 
    --reading-font: 'Merriweather', serif;     
    --body-font: 'Lato', sans-serif;           

    --text-color: #333333;      
    --bg-color: #ffffff;        
    --bg-light: #fbfefd; 
    --copper-color: #b48b5e;    
    --gold-color: #d4af37;      
    --bg-dark: #0f4c3a;         
    --bg-darker: #063f2e;
}

/* Nhúng font hệ thống tránh lỗi hiển thị tiếng Việt */
@import url('https://fonts.googleapis.com/css2?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; }
html, body { height: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; font-family: var(--body-font); color: var(--text-color); background-color: var(--bg-color); line-height: 1.6; }

.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 đề SECTION 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; }

/* ==========================================================================
   2. HEADER & MENU (GIỮ NGUYÊN)
   ========================================================================== */
.site-header { background-color: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.15); padding: 15px 0; color: #fff; position: relative; z-index: 1000; box-shadow: 0 4px 20px rgba(15, 76, 58, 0.15); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.site-title a { color: #fff; font-family: var(--title-font); font-size: 1.8rem; font-weight: bold; text-transform: uppercase; }
.main-navigation ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; }
.main-navigation ul li a { color: #fff; font-weight: 500; font-size: 1.05rem; }
.main-navigation ul li a:hover { color: var(--gold-color); }
.menu-toggle { display: none; }

@media (max-width: 900px) {
    .menu-toggle { display: flex; align-items: center; gap: 5px; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 1rem; }
    .main-navigation { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--bg-dark); box-shadow: -5px 0 20px rgba(0,0,0,0.2); padding: 60px 20px 20px; transition: right 0.3s ease; z-index: 9999; }
    .main-navigation.toggled { right: 0; }
    .main-navigation ul { flex-direction: column; gap: 0; }
    .main-navigation ul li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .main-navigation ul li a { display: block; padding: 15px 0; }
}

/* ==========================================================================
   3. HERO & 12 CUNG / 12 CON GIÁP (CHỮ TO ĐẸP)
   ========================================================================== */
.hero-section { position: relative; text-align: center; padding: 100px 0; background: #f4f8f6; overflow: hidden; margin-bottom: 40px; }
.hero-title { font-family: var(--title-font); font-size: 3.5rem; color: var(--bg-dark); margin-bottom: 15px; }
.btn-gold { display: inline-block; padding: 12px 35px; background: var(--gold-color); color: #fff; font-weight: bold; text-transform: uppercase; border-radius: 4px; box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); }

.zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; margin-bottom: 60px; }
.zodiac-card { text-align: center; padding: 25px 15px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.05); transition: 0.4s; }
.zodiac-card:hover { transform: translateY(-7px); box-shadow: 0 15px 35px rgba(15, 76, 58, 0.1); border-color: var(--copper-color); }
.card-icon img { width: 100%; max-width: 110px; margin: 0 auto 15px; filter: sepia(1) hue-rotate(-15deg) saturate(1.2) contrast(0.9); transition: 0.3s; }
.zodiac-card:hover .card-icon img { transform: scale(1.1); filter: none; }

.arrow-separator { color: var(--copper-color); margin-bottom: 15px; opacity: 0.6; font-size: 12px; display: flex; justify-content: center; align-items: center; }
.arrow-separator .line { width: 30px; height: 1px; background: var(--copper-color); margin: 0 5px; }

/* CHỮ 12 CUNG / CON GIÁP */
.card-info h4 { font-family: var(--title-font); font-size: 1.7rem; font-weight: 700; color: var(--bg-dark); margin: 0 0 5px 0; }
.card-info .date { font-family: var(--body-font); font-size: 0.9rem; color: #7f8c8d; display: block; }

@media (max-width: 900px) {
    .zodiac-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .card-info h4 { font-size: 1.4rem; }
}

/* ==========================================================================
   4. MODULE: NGUYÊN TỐ CHIÊM TINH (RECOVERED)
   ========================================================================== */
.elements-section { padding: 80px 0; background: #fff; }
.elements-wrapper { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.elements-heading { flex: 0 0 30%; }
.elements-heading h2 { font-family: var(--title-font); font-size: 3.2rem; color: var(--bg-dark); line-height: 1.1; margin: 0; text-align: left; }
.elements-heading p { margin-top: 15px; color: #666; font-family: var(--reading-font); }

.elements-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.element-item { display: flex; gap: 20px; align-items: flex-start; }
.elem-icon { font-size: 2.5rem; flex-shrink: 0; line-height: 1; }
.elem-content h3 { font-family: var(--title-font); font-size: 1.8rem; font-weight: 700; color: var(--bg-dark); margin: 0 0 10px 0; }
.elem-content p { font-family: var(--body-font); font-size: 1.05rem; color: #555; margin: 0; line-height: 1.6; }

@media (max-width: 900px) {
    .elements-wrapper { flex-direction: column; text-align: center; }
    .elements-heading { flex: 1; margin-bottom: 30px; }
    .elements-heading h2 { text-align: center; }
    .elements-grid { grid-template-columns: 1fr; gap: 30px; }
    .element-item { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   5. SIDEBAR & WIDGETS (FIX HIỂN THỊ PC & MOBILE)
   ========================================================================== */
.row-flex { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.content-area.has-sidebar { width: calc(70% - 20px); }
.sidebar-right { width: calc(30% - 20px); min-width: 320px; position: sticky; top: 30px; }

.widget { background: #fff; padding: 30px; border-radius: 12px; border: 1px solid #f0f0f0; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.widget-title { font-family: var(--title-font); font-size: 1.6rem; font-weight: 700; border-bottom: 3px solid var(--gold-color); color: var(--bg-dark); padding-bottom: 10px; margin-bottom: 25px; display: inline-block; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 12px 0; border-bottom: 1px dashed #eee; }
.widget ul li a { color: #555; display: block; font-family: var(--reading-font); transition: 0.2s; }
.widget ul li:hover a { color: var(--bg-dark); padding-left: 5px; font-weight: 600; }

/* FIX ẨN HIỆN SIDEBAR MOBILE */
.sidebar-toggle-btn { display: none !important; } /* Mặc định ẩn trên PC */
.sidebar-inner { display: block !important; }    /* Mặc định hiện trên PC */

@media (max-width: 900px) {
    .row-flex { flex-direction: column; }
    .content-area.has-sidebar, .sidebar-right { width: 100%; min-width: 0; }
    .sidebar-right { margin-top: 40px; position: static; }

    .sidebar-toggle-btn { display: flex !important; justify-content: space-between; align-items: center; width: 100%; padding: 18px 20px; background: #fff; border: 2px solid var(--gold-color); color: var(--bg-dark); font-family: var(--title-font); font-size: 1.3rem; font-weight: bold; border-radius: 10px; cursor: pointer; margin-bottom: 25px; box-shadow: 0 6px 15px rgba(0,0,0,0.05); position: relative; z-index: 50; }
    .sidebar-inner { display: none !important; }
    .sidebar-inner.is-visible { display: block !important; animation: fadeIn 0.5s; }
}

/* ==========================================================================
   6. BÀI VIẾT (READING FONT) & HEADER DETAIL
   ========================================================================== */
.entry-content { font-family: var(--reading-font); font-size: 1.25rem; color: #2c3e50; line-height: 1.9; }
.single-title { font-family: var(--title-font); font-size: 3.2rem; color: var(--bg-dark); font-weight: 700; text-align: center; margin-bottom: 20px; }
.entry-content h2, .entry-content h3 { font-family: var(--title-font); color: var(--bg-dark); margin-top: 1.5em; font-weight: 700; border-bottom: 1px solid #eee; padding-bottom: 10px; }

.zodiac-detail-header, .wiki-header { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 50px 20px; text-align: center; margin-bottom: 40px; box-shadow: 0 15px 45px rgba(0,0,0,0.04); }
.z-icon-large img, .wiki-icon img { max-width: 160px; margin: 0 auto 30px; filter: none !important; animation: gentleFloat 4s ease-in-out infinite; }
@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ==========================================================================
   7. BỐI TÌNH YÊU & BLOG GRID
   ========================================================================== */
.love-calculator-section { padding: 80px 0; background: #fffaf0; }
.compatibility-box { background: #fff; max-width: 800px; margin: 30px auto; padding: 40px; border-radius: 20px; border: 1px solid #ffe0e6; box-shadow: 0 10px 40px rgba(212, 93, 121, 0.1); text-align: center; }
.selector-grid { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 30px; }
.zodiac-select { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #ddd; background: #fbfefd; cursor: pointer; font-family: var(--body-font); font-size: 1rem; }
.heart-icon { font-size: 50px; animation: heartBeat 1.5s infinite; color: #d45d79; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { background: #fff; border: 1px solid #eee; border-radius: 15px; overflow: hidden; transition: 0.3s; }
.blog-title { font-family: var(--title-font); font-size: 1.6rem; font-weight: 700; padding: 15px; margin: 0; color: var(--bg-dark); }
.entry-excerpt { font-family: var(--reading-font); font-size: 1rem; color: #666; padding: 0 15px 15px; }

/* ==========================================================================
   8. FOOTER (GIỮ NGUYÊN)
   ========================================================================== */
.site-footer { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%); color: #e8f5e9; padding: 80px 0 30px; margin-top: auto; border-top: 5px solid var(--gold-color); }
.footer-widgets-grid { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-col { flex: 1; min-width: 250px; }
.footer-logo { font-family: var(--title-font); font-size: 2rem; color: #fff; font-weight: bold; margin-bottom: 15px; }
.footer-title { font-family: var(--title-font); font-size: 1.3rem; color: var(--gold-color); border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 8px; margin-bottom: 20px; }
.footer-links li a { color: #e8f5e9; display: block; padding: 5px 0; }
.footer-links li a:hover { color: var(--gold-color); padding-left: 5px; }
@media (max-width: 768px) { .footer-widgets-grid { flex-direction: column; gap: 30px; } }

/* Fix Padding Mobile */
@media (max-width: 767px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .zodiac-grid { gap: 10px !important; }
    .zodiac-detail-header, .widget { padding: 20px 15px !important; }
}