/* --- 1. THIẾT LẬP CHUNG (NAVY GLOBAL) --- */
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#e0e6f0; line-height:1.6; background:#050a18; -webkit-font-smoothing:antialiased; }
.container { max-width:1200px; margin:30px auto; padding:0 15px; }
img { max-width:100%; height:auto; }

/* --- 2. HEADER & NAVIGATION --- */
.main-header { height:65px; background:#0d152a; border-bottom:2px solid #C5A059; position:sticky; top:0; z-index:999; display:flex; align-items:center; }
.header-wrapper { width:95%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.site-branding { display:flex; align-items:center; text-decoration:none; gap:10px; flex-shrink:0; }
.site-icon img { max-height:35px; width:auto; display:block; object-fit:contain; }
.site-title { font-weight:bold; color:#C5A059!important; font-size:18px; text-transform:uppercase; white-space:nowrap; }
.desktop-nav { display:flex; gap:8px; flex-grow:1; justify-content:center; padding:0 20px; }
.cat-link { text-decoration:none; padding:6px 16px; border-radius:25px; font-size:13px; font-weight:600; transition:0.3s; background:rgba(197,160,89,0.1); color:#C5A059!important; border:1px solid rgba(197,160,89,0.3); }
.cat-link:hover { background:linear-gradient(45deg,#BF953F,#FCF6BA,#AA771C)!important; color:#050a18!important; transform:scale(1.05); border-color:#FCF6BA; }

/* --- 3. SEARCH & MOBILE MENU --- */
.search-block { display:flex; align-items:center; position:relative; order:2; margin-left:15px; }
.search-checkbox, .cat-checkbox { display:none; }
.search-form { display:none; position:absolute; right:30px; background:#0d152a; border:1px solid #C5A059; border-radius:20px; }
.search-input { border:none; padding:5px 12px; border-radius:20px; outline:none; width:160px; font-size:13px; background:transparent; color:#fff; }
.search-icon { cursor:pointer; font-size:20px; color:#C5A059!important; transition:0.3s; z-index:2; }
.search-checkbox:checked ~ .search-form { display:block; }
.mobile-cat-dropdown { display:none; order:1; position:relative; }
.cat-drop-btn { background:linear-gradient(45deg,#BF953F,#FCF6BA,#AA771C)!important; color:#050a18!important; padding:6px 15px; border-radius:20px; font-size:13px; cursor:pointer; font-weight:600; border:none; }
.cat-dropdown-content { display:none; position:absolute; right:0; top:35px; background:#0d152a; border:1px solid #C5A059; border-radius:12px; min-width:160px; overflow:hidden; z-index:10; }
.cat-dropdown-content a { display:block; padding:12px 20px; text-decoration:none; color:#e0e6f0!important; border-bottom:1px solid #1a2540; font-size:14px; }
.cat-dropdown-content a:hover { background:rgba(197,160,89,0.15); color:#C5A059!important; }
.cat-checkbox:checked ~ .cat-dropdown-content { display:block; }

/* --- 4. LAYOUT TRANG CHỦ & SIDEBAR --- */
.main-layout { display:flex; gap:30px; align-items:flex-start; }
.content-area { flex:1; min-width:0; }
.sidebar { width:340px; flex-shrink:0; position:sticky; top:85px; }
.widget { background:#0d152a; padding:20px; border-radius:15px; border:1px solid #1a2540; margin-bottom:25px; }
.widget-title { font-size:16px; font-weight:700; border-left:4px solid #C5A059; padding-left:12px; margin:0 0 15px 0; text-transform:uppercase; color:#C5A059; }

/* --- 5. POST CARD --- */
.post-list { display:grid; grid-template-columns:1fr; gap:20px; }
.simple-post { display:flex; gap:15px; background:#0d152a!important; padding:12px; border-radius:12px; border:1px solid #1a2540; align-items:stretch; height:180px; overflow:hidden; box-sizing:border-box; transition:all .4s ease; position:relative; z-index:1; }
.simple-post:hover { transform:translateY(-5px) scale(1.01); border-color:#FCF6BA; box-shadow:0 10px 25px rgba(0,0,0,.5); z-index:2; }
.post-thumb { width:160px; height:100%; flex-shrink:0; border-radius:8px; overflow:hidden; background:#050a18; border:1px solid rgba(197,160,89,.2); }
.post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.simple-post:hover .post-thumb img { transform:scale(1.1); }
.post-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; padding:2px 0; }
.post-info h2 { margin:0!important; line-height:1.2!important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-info h2 a { text-decoration:none!important; color:#C5A059!important; font-size:18px; font-weight:700; text-transform:uppercase; }
.excerpt { font-size:13px!important; color:#94a3b8!important; margin:4px 0!important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.read-more-btn { align-self:flex-start; background:linear-gradient(45deg,#BF953F,#FCF6BA,#AA771C)!important; color:#050a18!important; padding:6px 18px; border-radius:20px; font-size:11px; font-weight:800; text-decoration:none; text-transform:uppercase; margin-top:auto; transition:.3s; }

/* --- 6. TRANG CHI TIẾT & TAGS BLOCK --- */
.single-page .container { max-width:850px; margin:40px auto; background:#0d152a; padding:40px; border-radius:15px; border:1px solid #1a2540; }
.single-title { font-size:36px; color:#C5A059!important; margin-bottom:25px; font-weight:800; }
.tag-block { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:35px; justify-content:center; position:relative; z-index:99; }
.tag-btn { position:relative; display:inline-flex; align-items:center; transition:.3s; text-decoration:none; }
.tag-icon svg { width:48px; height:48px; transition:.3s; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.tag-btn:hover { transform:scale(1.15); }

/* --- 7. GIEO QUẺ TRANG CHỦ --- */
.gieo-que-wrapper { margin:20px 0 40px; text-align:center; }
.btn-gieo-que-main { display:inline-flex; align-items:center; gap:12px; padding:14px 45px; background:linear-gradient(45deg,#BF953F,#FCF6BA,#AA771C)!important; color:#050a18!important; text-decoration:none!important; font-weight:800; font-size:16px; text-transform:uppercase; border-radius:50px; border:1px solid #FCF6BA; box-shadow:0 4px 15px rgba(0,0,0,.3); transition:.4s ease; cursor:pointer; }
.btn-gieo-que-main:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 8px 25px rgba(191,149,63,.4); filter:brightness(1.1); }

/* --- 8. FIX NÚT KẾT QUẢ (NORMAL: DARK | HOVER: METAL GOLD) --- */
.gieo-que-actions { margin-top:50px!important; display:flex!important; gap:15px!important; justify-content:center!important; align-items:center!important; clear:both!important; }

/* Trạng thái bình thường: Nền tối sâu, viền vàng đồng mảnh */
.gieo-que-actions .btn-action { 
    display:inline-flex!important; align-items:center!important; justify-content:center!important; 
    height:46px!important; padding:0 30px!important; border-radius:30px!important; 
    font-size:13px!important; font-weight:800!important; text-transform:uppercase!important; 
    text-decoration:none!important; transition:all .3s ease!important; cursor:pointer!important; 
    border:1px solid rgba(197,160,89,0.4)!important; 
    background:#0d152a!important; /* Nền tối đồng bộ với Widget */
    color:#C5A059!important; 
    box-shadow:none!important;
    background-image:none!important; /* Xóa bỏ mọi gradient cũ nếu có */
}

/* Trạng thái Hover: Chuyển sang hiệu ứng Kim Loại rực rỡ */
.gieo-que-actions .btn-action:hover { 
    background:linear-gradient(45deg,#BF953F,#FCF6BA,#AA771C)!important; 
    color:#050a18!important; /* Chữ tối nổi bật trên nền kim loại sáng */
    border-color:#FCF6BA!important; 
    transform:translateY(-3px) scale(1.02)!important; 
    box-shadow:0 8px 20px rgba(191,149,63,0.4)!important; 
}

/* Đảm bảo Mobile cũng đồng bộ */
@media (max-width:768px) { .gieo-que-actions { flex-direction:column; gap:12px!important; } .btn-action { width:100%!important; } }

/* --- 9. MOBILE RESPONSIVE --- */
@media (max-width:991px) { .sidebar { display:none; } .main-layout { flex-direction:column; } .desktop-nav { display:none; } .mobile-cat-dropdown { display:block; } }
@media (max-width:768px) { .simple-post { height:auto; flex-direction:column; } .post-thumb { width:100%; height:200px; } .gieo-que-actions { flex-direction:column; width:100%; } .btn-action { width:100%; } }

/* --- 10. LOADING EFFECT --- */
.loading-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(5,10,24,0.9); z-index:9999; flex-direction:column; justify-content:center; align-items:center; color:#C5A059; }
.spinner { width:40px; height:40px; border:3px solid rgba(197,160,89,0.2); border-top:3px solid #FCF6BA; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:15px; }
@keyframes spin { to { transform:rotate(360deg); } }