:root {
    --bg-void: #050505;       /* Đen Hư Không */
    --bg-sect: #0f0f0f;       /* Nền Tông Môn */
    --gold: #d4af37;          /* Vàng Kim */
    --gold-glow: #ffd700;     /* Vàng Sáng */
    --crimson: #8a1c1c;       /* Đỏ Huyết (Sát khí) */
    --jade: #10b981;          /* Ngọc Lục (Sinh cơ) */
    --spirit: #3b82f6;        /* Linh Khí (Lam) */
    
    --font-art: 'Philosopher', sans-serif;
    --font-head: 'Philosopher', sans-serif;
    --font-body: 'Noto Serif', serif;
    --imperial-gold: #ffd700;     /* Vàng Đế Vương */
    --imperial-red: #c0392b;      /* Đỏ Cung Đình */
    --rare-purple: #9b59b6;       /* Tím Cực Phẩm */
    --bg-token: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
        
    --glass: rgba(15, 15, 15, 0.9);
    --border-gold: 1px solid rgba(212, 175, 55, 0.2);
    --shadow-glow: 0 0 15px rgba(212, 175, 55, 0.15);

    --bg-deep: #050205; /* Đen tím cực thẫm */
    --card-bg: #0f0f12;
    
    /* Màu sắc Cảnh giới (Neon/Mystic Colors) */
    --c-luyenkhi: #a5f3fc; /* Cyan */
    --c-trucco: #4ade80;   /* Emerald */
    --c-kimdan: #fbbf24;   /* Golden */
    --c-nguyenanh: #d946ef; /* Magenta */
    --c-hoathan: #f43f5e;  /* Crimson */
    --c-dokiep: #a855f7;  /* Indigo Thunder */
    --c-daoto: #ff1a1a;   /* Indigo Thunder */
    --void-bg: #05070a;       /* Đen xanh thẳm */
    
    
    --star-gold: #fbbf24;     /* Vàng sao */
    --mystic-purple: #a855f7; /* Tím huyền bí */
    --nebula-blue: #3b82f6;   /* Xanh tinh vân */
    
    --font-title: 'Philosopher', sans-serif;
    --font-body: 'Noto Serif', serif;
    
    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Fonts */
    --f-art: 'Philosopher', sans-serif;
    --f-title: 'Philosopher', sans-serif;
    --f-text: 'Noto Serif', serif;

     --bg-void: #050b14;       /* Đen xanh thẳm */
    --bg-panel: rgba(16, 24, 40, 0.7);
    
    --bg-main: #0a0a0a;       /* Đen nhám */
    --bg-card: #141414;       /* Đen nhạt hơn */
    
    --gold-pale: #d4c5a3;     /* Vàng sâm panh (Chữ chính) */
    --gold-dim: #8a7e66;      /* Vàng trầm (Viền/Icon) */
    --text-gray: #888888;     /* Chữ phụ */
    --border-thin: 1px solid rgba(212, 197, 163, 0.15);
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;

    --transition: all 0.4s ease;
    
    --sect-bg: #0b0c10;
    --sect-panel: rgba(20, 20, 25, 0.6);
    --sect-gold: #d4af37;    /* Vàng Kim */
    --sect-silver: #a0aec0;  /* Bạc */
    --sect-bronze: #cd7f32;  /* Đồng */
    --sect-crimson: #9f1239; /* Đỏ Ma Tông */
    --sect-blue: #3b82f6;    /* Xanh Chính Đạo */
    --guide-bg: #080808;
    --guide-card-bg: rgba(255, 255, 255, 0.03);
    --guide-border: rgba(255, 255, 255, 0.08);
    --guide-gold: #d4af37;
    --guide-text: #ccc;
    --guide-highlight: #e5e5e5;

    --go-bg: #09090b;
    --go-board-dark: #131316;
    --go-line: rgba(255, 255, 255, 0.15);
    --go-gold: #d4af37;
    --go-white-stone: #e0e0e0;
    --go-black-stone: #000000;
    --go-glow-blue: 0 0 15px rgba(59, 130, 246, 0.3);
    --bg-dark: #050302;
    --ink-color: #261006;    /* Màu mực nâu đen */
    --seal-color: #b91c1c;   /* Màu đỏ ấn triện */
    --gold-text: #8a6d3b;    /* Màu vàng kim cho tiêu đề phụ */
    --black: #211E32;
    --dark: #2A2F42;
    --green: #5AFE72;
    --white: #ffffff;
    --purple: #9A3BBA;
    --danger: #FE4E56;
    --yellow: #fbff22;
    --reader-bg: #121212;
    --reader-text: #d4d4d4;
    --reader-gold: #d4af37;
    --reader-panel: #1e1e1e;
    
    --font-read: 'Noto Serif', serif;
    --font-ui: 'Philosopher', sans-serif;
    
    --spacing: 1.8; /* Khoảng cách dòng */
    --size: 19px;   /* Cỡ chữ */
   
    --border: rgba(255, 255, 255, 0.1);
    
    /* Color Palette */
    --c-fire: #ef4444;
    --c-ice: #38bdf8;
    --c-wood: #22c55e;
    --c-gold: #eab308;
    --c-earth: #d97706;
    --c-dark: #a855f7;
    --bg-core: #050505;
            
    /* Bảng màu Ngũ Hành Neon */
    --c-metal: #ffd700;   /* Kim - Vàng rực */
    --c-wood: #00ff88;    /* Mộc - Xanh lá neon */
    --c-water: #00f2ff;   /* Thủy - Xanh băng */
    --c-fire: #ff0055;    /* Hỏa - Đỏ hồng */
    --c-earth: #ff8c00;   /* Thổ - Cam đất */
    --bg-dark: #050505;
    --p1-color: #00f2ff;
    --p2-color: #ff0055;
    --blood: #b91c1c;
    --blood-light: #ef4444;
    --gold: #d4af37;
    --text: #e5e5e5;
    --font-head: 'Philosopher', sans-serif;
    --font-scary: 'Butcherman', cursive; /* Font rùng rợn cho chữ "Truy Sát" */
    --border: 1px solid rgba(212, 175, 55, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--bg-void);
    color: #d1d5db;
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Nền họa tiết rồng phượng tối */
    background-image: url("black-scales.png");
}

/* Hiệu ứng mây trôi (Cloud Parallax) */
.fog-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/img/fog1.png') repeat-x;
    background-size: 200% auto; opacity: 0.1;
    animation: fogMove 80s linear infinite;
    pointer-events: none;
}
@keyframes fogMove { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }

a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 1350px; margin: 0 auto; padding: 0 15px; }

/* --- 2. HEADER & SEARCH --- */
header {
    top: 0; z-index: 1000;
    background: var(--glass); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}

/* News Ticker (Tin tức chạy) */
.news-ticker {
    background: #000; color: #aaa; font-size: 12px; padding: 6px 0; border-bottom: 1px solid #222;
}
.ticker-content { display: flex; gap: 20px; white-space: nowrap; overflow: hidden; }
.ticker-text { animation: marquee 20s linear infinite; display: inline-block; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.header-main { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; }

/* Animated Logo */
.logo {
    display: flex; align-items: center; gap: 15px;
    font-family: var(--font-art); font-size: 32px; color: var(--gold);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}
.bagua {
    font-size: 38px; color: var(--gold);
    animation: spin 15s linear infinite; filter: drop-shadow(0 0 5px var(--gold));
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Category Search Bar */
.search-bar {
    flex: 1; max-width: 600px; display: flex; align-items: center;
    background: #151515; border: 1px solid #333; border-radius: 50px; padding: 4px;
    transition: 0.3s; position: relative;
}
.search-bar:focus-within { border-color: var(--gold); box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }

.search-cat {
    background: transparent; color: #888; border: none; outline: none;
    padding: 0 15px; border-right: 1px solid #333; font-size: 13px; cursor: pointer;
}
.search-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: white; padding: 10px; font-size: 14px;
}
.search-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--gold); color: black; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* Desktop Menu */
.nav-bar { background: rgba(0,0,0,0.5); padding: 10px 0; border-bottom: 1px solid #222; }
.nav-list { display: flex; justify-content: center; gap: 30px; list-style: none; }
.nav-item {
    font-family: var(--font-head); font-size: 15px; color: #aaa; position: relative; cursor: pointer;
}
.nav-item:hover { color: var(--gold); }
.nav-item::after {
    content: '✦'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-size: 8px; color: var(--crimson); opacity: 0; transition: 0.3s;
}
.nav-item:hover::after { opacity: 1; top: -15px; }

/* --- 3. HERO & DASHBOARD (TRANG CHỦ) --- */
.dashboard-grid {
    display: grid; grid-template-columns: 3fr 1fr; gap: 20px; margin-top: 20px;
}

/* Slider */
.hero-slider {
    height: 420px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid #333;
}
.hero-img_tranphai { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.hero-caption {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px;
    background: linear-gradient(to top, black, transparent);
}
.hero-title { font-family: var(--font-art); font-size: 48px; color: white; text-shadow: 0 0 10px black; }

/* Widget Side (Tính năng Tu Tiên) */
.widget-col { display: flex; flex-direction: column; gap: 15px; }

.feature-card {
    flex: 1; background: #111; border: 1px solid #333; border-radius: 8px; padding: 15px;
    display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.3s;
    position: relative; overflow: hidden;
}
.feature-card:hover { transform: translateX(-5px); border-color: var(--gold); }

/* Màu sắc từng tính năng */
.fc-cave { border-left: 3px solid var(--jade); } /* Động phủ */
.fc-duel { border-left: 3px solid var(--crimson); } /* Quyết đấu */
.fc-grudge { border-left: 3px solid #555; } /* Ân oán */
.fc-market { border-left: 3px solid var(--gold); } /* Đấu giá */

.fc-icon { font-size: 24px; width: 40px; text-align: center; }
.fc-text h4 { font-family: var(--font-head); color: white; font-size: 16px; margin-bottom: 2px; }
.fc-text p { font-size: 12px; color: #777; }

/* --- 4. BẢNG XẾP HẠNG TAM GIỚI --- */
.section-head {
    display: flex; align-items: center; gap: 15px; margin: 50px 0 25px;
    border-bottom: 1px solid #222; padding-bottom: 10px;
}
.sect-icon { color: var(--crimson); font-size: 24px; }
.sect-name { font-family: var(--font-art); font-size: 32px; color: var(--gold); }

.rank-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.rank-box {
    background: rgba(20,20,20,0.8); border: 1px solid #222; border-radius: 8px; overflow: hidden;
}
.rank-title {
    text-align: center; padding: 12px; font-family: var(--font-head); font-size: 18px; font-weight: bold;
    border-bottom: 1px solid #333;
}
.rt-heaven { color: var(--gold); background: linear-gradient(to bottom, rgba(212,175,55,0.1), transparent); }
.rt-earth { color: #10b981; background: linear-gradient(to bottom, rgba(16,185,129,0.1), transparent); }
.rt-human { color: #3b82f6; background: linear-gradient(to bottom, rgba(59,130,246,0.1), transparent); }

.rank-item {
    display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px dashed #333;
}
.r-idx { width: 25px; font-weight: bold; font-family: var(--font-head); color: #555; }
.top-1 { color: var(--gold); font-size: 20px; text-shadow: 0 0 5px var(--gold); }
.r-info { flex: 1; }
.r-name { color: #ddd; font-size: 14px; font-weight: 600; }
.r-meta { font-size: 11px; color: #666; }

/* --- 5. VẠN PHÁP QUY TÔNG (20+ DANH MỤC) --- */
/* Danh mục chính (Hiển thị dạng Khối lớn) */
.main-cat-block { margin-bottom: 40px; }
.cat-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
.cat-label { font-family: var(--font-head); font-size: 20px; color: white; border-left: 4px solid var(--gold); padding-left: 10px; }

.book-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.book-card {
    background: #111; border: 1px solid #222; border-radius: 6px; overflow: hidden;
    position: relative; transition: 0.3s; cursor: pointer;
}
.book-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 0 15px rgba(212,175,55,0.1); }

.bc-cover { height: 220px; overflow: hidden; position: relative; }
.bc-cover img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.book-card:hover .bc-cover img { transform: scale(1.1); }

.bc-info { padding: 10px; }
.bc-title { font-family: var(--font-head); font-size: 14px; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-chap { font-size: 11px; color: var(--jade); margin-top: 5px; }

/* Danh mục phụ (Hiển thị dạng Tags/Buttons - Để đủ 20 danh mục) */
.all-cats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px;
    background: #111; padding: 30px; border: 1px solid #333; border-radius: 8px;
}
.cat-tag {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1a1a1a; border: 1px solid #333; padding: 15px; border-radius: 6px;
    transition: 0.3s; cursor: pointer;
}
.cat-tag:hover { background: #222; border-color: var(--gold); transform: translateY(-3px); }
.cat-tag i { font-size: 20px; color: var(--gold); margin-bottom: 8px; }
.cat-tag span { font-family: var(--font-head); font-size: 13px; color: #ccc; }

/* --- 6. FOOTER --- */
/* --- 6. FOOTER ĐỈNH CAO (MYSTICAL FOOTER) --- */
footer {
    margin-top: 100px; background: #020202; border-top: 3px solid var(--gold);
    position: relative; padding-top: 60px; padding-bottom: 30px;
}
/* Họa tiết trang trí footer */
.footer-deco {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 30px; background: var(--gold);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.footer-inner {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #222;
}
.f-brand { font-family: var(--font-head); font-size: 32px; color: var(--gold); margin-bottom: 15px; display: block;}
.f-desc { font-size: 14px; color: #777; line-height: 1.6; }

.f-title { color: white; font-family: var(--font-head); font-size: 18px; margin-bottom: 20px; }
.f-links li { margin-bottom: 10px; }
.f-links a { color: #888; font-size: 14px; }
.f-links a:hover { color: var(--gold); padding-left: 5px; }

.app-download { display: flex; gap: 10px; }
.app-btn {
    flex: 1; background: #1a1a1a; border: 1px solid #333; padding: 10px; border-radius: 4px;
    display: flex; align-items: center; gap: 10px; color: #ccc; cursor: pointer;
}
.app-btn:hover { border-color: var(--gold); color: white; }
.app-btn i { font-size: 24px; }

.copyright { text-align: center; padding-top: 30px; color: #444; font-size: 13px; }
/* RESPONSIVE */
@media (max-width: 1024px) { .book-grid { grid-template-columns: repeat(4, 1fr); } .footer-inner {
grid-template-columns: 1fr 1fr;
gap: 30px;
} }
@media (max-width: 768px) {
    .header-main { flex-direction: column; gap: 10px; padding: 10px 0; }
    .search-bar { width: 100%; }
    .nav-bar, .user-info { display: none; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .hero-slider { height: 250px; }
    .hero-title { font-size: 32px; }
    .widget-col { flex-direction: row; flex-wrap: wrap; }
    .rank-grid { grid-template-columns: 1fr; gap: 15px; }
    .book-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .mobile-bar { display: flex; }
     footer {
margin-top: 50px;
}

.footer-inner {
grid-template-columns: 1fr; /* Xếp dọc footer */
text-align: center;
gap: 30px;
}

.app-download {
justify-content: center;
}
}
@media (max-width: 480px) { .book-grid { grid-template-columns: repeat(2, 1fr); } }


.ttl-section {
margin: 60px 0;
border: 1px solid #333;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
background-color: #0f0f0f;
}

/* Header Lệnh Bài */
.ttl-header {
padding: 25px 40px;
background: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(163, 21, 21, 0.15));
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.ttl-header::before {
content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px;
background: var(--imperial-gold);
box-shadow: 0 0 10px var(--imperial-gold);
}

.ttl-title-box { display: flex; flex-direction: column; }
.ttl-name {
font-family: var(--font-art); font-size: 42px; color: var(--imperial-gold);
text-shadow: 0 0 15px rgba(255, 215, 0, 0.3); line-height: 1;
}
.ttl-sub { color: #888; font-size: 13px; letter-spacing: 2px; margin-top: 5px; font-family: var(--font-head); }

/* Nút Kích Hoạt */
.btn-activate {
background: linear-gradient(135deg, var(--imperial-gold), #d35400);
color: #000; font-weight: bold; font-family: var(--font-head); font-size: 16px;
padding: 10px 30px; border-radius: 4px; cursor: pointer;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
border: 1px solid #fff;
animation: pulseGold 2s infinite;
display: flex; align-items: center; gap: 10px;
}
@keyframes pulseGold { 0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); } 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } }

/* Thanh Tiến Độ */
.ttl-progress-bar {
background: #222; height: 40px; margin: 20px 40px 0; border-radius: 20px;
position: relative; border: 1px solid #444;
}
.progress-fill {
height: 100%; width: 35%; /* Ví dụ 35% */
background: linear-gradient(90deg, var(--jade), #2ecc71);
border-radius: 20px; position: relative;
box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
}
.progress-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: white; font-weight: bold; font-size: 12px; text-shadow: 0 0 5px black; z-index: 2;
}
.current-level {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
background: #000; color: var(--jade); padding: 2px 10px; border-radius: 10px; font-size: 11px; border: 1px solid var(--jade);
}

/* Khu Vực Phần Thưởng (Scroll Ngang) */
.ttl-tracks {
display: grid; grid-template-rows: 1fr 1fr; gap: 5px;
padding: 20px 40px; overflow-x: auto;
}
/* Thanh cuộn đẹp */
.ttl-tracks::-webkit-scrollbar { height: 8px; }
.ttl-tracks::-webkit-scrollbar-track { background: #111; }
.ttl-tracks::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.ttl-tracks::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.track-row {
display: flex; gap: 20px; align-items: center; min-width: max-content;
padding: 10px 0; position: relative;
}

/* Label Hàng */
.track-label {
position: sticky; left: 0; z-index: 10;
width: 120px; height: 80px; display: flex; align-items: center; justify-content: center;
background: #151515; border: 1px solid #333; color: #aaa; font-family: var(--font-head);
border-radius: 4px; box-shadow: 5px 0 10px rgba(0,0,0,0.5);
}
.track-label.vip {
background: linear-gradient(135deg, #2c0b0b, #000);
border-color: var(--imperial-red); color: var(--imperial-gold);
}

/* Item Phần Thưởng */
.reward-item {
width: 80px; height: 80px; background: #1a1a1a; border: 1px solid #333;
border-radius: 6px; position: relative; display: flex; justify-content: center; align-items: center;
cursor: pointer; transition: 0.3s;
}
.reward-item:hover { transform: scale(1.1); z-index: 5; }
.reward-item img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); }

/* Trạng thái Item */
.reward-item.claimed::after {
content: '✔'; position: absolute; inset: 0; background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center; color: var(--jade); font-size: 24px;
}
.reward-item.locked { opacity: 0.5; filter: grayscale(1); }
.reward-item.vip-item { border: 1px solid var(--imperial-gold); box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1); }

/* Số lượng item */
.item-qty {
position: absolute; bottom: 2px; right: 5px; font-size: 10px; color: white; font-weight: bold;
text-shadow: 1px 1px 0 #000;
}
/* Cấp độ yêu cầu */
.req-level {
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: #666; white-space: nowrap;
}

/* Nhiệm Vụ (Footer của Lệnh bài) */
.ttl-quests {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
padding: 20px 40px; border-top: 1px dashed #333; background: rgba(0,0,0,0.3);
}
.quest-box {
display: flex; align-items: center; justify-content: space-between;
background: #111; padding: 10px 15px; border-radius: 6px; border: 1px solid #333;
}
.quest-info h5 { color: #ddd; margin-bottom: 2px; font-size: 14px; }
.quest-info span { color: #666; font-size: 11px; }
.quest-progress { color: var(--jade); font-size: 12px; font-weight: bold; }

/* Responsive */
@media (max-width: 768px) {
.ttl-header { flex-direction: column; gap: 15px; text-align: center; padding: 20px; }
.ttl-name { font-size: 32px; }
.ttl-progress-bar { margin: 15px 20px 0; }
.ttl-tracks { padding: 20px; }
.track-label { width: 80px; font-size: 12px; }
.ttl-quests { grid-template-columns: 1fr; padding: 20px; }
}


.container_ngocgian {
color: #ddd;
font-family: var(--f-text);
line-height: 1.6;
min-height: 100vh;
}
.header-box {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.header-icon {
    font-size: 40px; color: #333; margin-bottom: 10px;
    animation: spinSlow 20s linear infinite;
}

.main-title {
    font-family: var(--f-art);
    font-size: 64px;
    background: linear-gradient(to bottom, #fff 30%, #666 100%);
    -webkit-background-clip: text;
    color: transparent;
    margin: 0;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
    position: relative;
    z-index: 2;
}

.sub-title {
    font-family: var(--f-title);
    font-size: 18px;
    color: #888;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.sub-title::before, .sub-title::after {
    content: '✦'; color: #444; margin: 0 10px; font-size: 12px;
}

/* ==========================================================================
   3. GRID HỆ THỐNG (LAYOUT)
   ========================================================================== */
.jade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột */
    gap: 40px;
    padding: 20px;
}

/* ==========================================================================
   4. CẤU TRÚC THẺ BÀI (CARD STRUCTURE)
   ========================================================================== */
.jade-card {
    position: relative;
    height: 550px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid #222;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    group: card; /* Group name for hover effects */
}

/* Lớp ảnh nền (Sẽ được tùy biến cho từng card) */
.card-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: 10s ease-in-out;
    filter: grayscale(100%) brightness(0.4) contrast(1.2);
    opacity: 0.6; z-index: 0;
}

/* Lớp phủ gradient đen */
.card-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, #000 10%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

/* Viền nội dung */
.card-border {
    position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; z-index: 2; pointer-events: none;
    transition: var(--transition);
}

/* Nội dung chính */
.card-content {
    position: relative; z-index: 3; height: 100%;
    padding: 30px;
    display: flex; flex-direction: column; justify-content: flex-end;
}

/* Icon cấp độ */
.level-icon {
    position: absolute; top: 30px; right: 30px;
    font-size: 40px; opacity: 0.5; transition: var(--transition);
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

/* Chữ Hán nền (Mờ) */
.kanji-bg {
    position: absolute; top: 20px; left: 20px;
    font-family: var(--f-art); font-size: 80px;
    opacity: 0.1; color: white; transition: var(--transition);
    line-height: 1;
}

/* Tiêu đề */
.card-title {
    font-family: var(--f-art); font-size: 42px; color: #fff;
    margin: 0 0 10px 0; line-height: 1.2;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: var(--transition);
    transform-origin: left bottom;
}

/* Thông tin chi tiết (Ẩn/Hiện) */
.card-details {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0;
}

.detail-row {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #aaa; margin-bottom: 5px;
    font-family: var(--f-title);
}
.detail-val { color: #fff; font-weight: bold; }

.desc-text {
    font-size: 14px; color: #ccc; text-align: justify;
    margin-top: 15px; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.btn-read {
    display: inline-block; padding: 8px 25px;
    border: 1px solid #555; color: #fff;
    font-family: var(--f-title); text-transform: uppercase; font-size: 12px; letter-spacing: 1px;
    transition: 0.3s; text-align: center; width: fit-content;
}

/* --- HIỆU ỨNG HOVER CHUNG --- */
.jade-card:hover { transform: translateY(-15px); }
.jade-card:hover .card-bg { transform: scale(1.1); filter: grayscale(0%) brightness(0.8) contrast(1.1); opacity: 1; }
.jade-card:hover .card-details { max-height: 300px; opacity: 1; padding-top: 15px; }
.jade-card:hover .card-title { transform: scale(0.8) translateY(-10px); }
.jade-card:hover .kanji-bg { opacity: 0; transform: translateY(-20px); }

/* ==========================================================================
   PHẦN 5: TÙY BIẾN TỪNG CẢNH GIỚI (CUSTOM STYLES PER LEVEL)
   ========================================================================== */

/* 1. LUYỆN KHÍ (QI CONDENSATION) */
.card-luyenkhi .level-icon, .card-luyenkhi .card-title { color: var(--c-luyenkhi); }
.card-luyenkhi:hover { border-color: var(--c-luyenkhi); box-shadow: 0 0 30px rgba(165, 243, 252, 0.2); }
.card-luyenkhi:hover .card-border { border-color: var(--c-luyenkhi); }
.card-luyenkhi:hover .btn-read { background: var(--c-luyenkhi); color: #000; border-color: var(--c-luyenkhi); }

/* 2. TRÚC CƠ (FOUNDATION ESTABLISHMENT) */
.card-trucco .level-icon, .card-trucco .card-title { color: var(--c-trucco); }
.card-trucco:hover { border-color: var(--c-trucco); box-shadow: 0 0 30px rgba(74, 222, 128, 0.2); }
.card-trucco:hover .card-border { border-color: var(--c-trucco); }
.card-trucco:hover .btn-read { background: var(--c-trucco); color: #000; border-color: var(--c-trucco); }

/* 3. KIM ĐAN (GOLDEN CORE) */
.card-kimdan .level-icon, .card-kimdan .card-title { color: var(--c-kimdan); }
.card-kimdan:hover { border-color: var(--c-kimdan); box-shadow: 0 0 30px rgba(251, 191, 36, 0.2); }
.card-kimdan:hover .card-border { border-color: var(--c-kimdan); }
.card-kimdan:hover .btn-read { background: var(--c-kimdan); color: #000; border-color: var(--c-kimdan); }

/* 4. NGUYÊN ANH (NASCENT SOUL) */
.card-nguyenanh .level-icon, .card-nguyenanh .card-title { color: var(--c-nguyenanh); }
.card-nguyenanh:hover { border-color: var(--c-nguyenanh); box-shadow: 0 0 30px rgba(217, 70, 239, 0.2); }
.card-nguyenanh:hover .card-border { border-color: var(--c-nguyenanh); }
.card-nguyenanh:hover .btn-read { background: var(--c-nguyenanh); color: #000; border-color: var(--c-nguyenanh); }

/* 5. HÓA THẦN (SOUL FORMATION) */
.card-hoathan .level-icon, .card-hoathan .card-title { color: var(--c-hoathan); }
.card-hoathan:hover { border-color: var(--c-hoathan); box-shadow: 0 0 30px rgba(244, 63, 94, 0.2); }
.card-hoathan:hover .card-border { border-color: var(--c-hoathan); }
.card-hoathan:hover .btn-read { background: var(--c-hoathan); color: #000; border-color: var(--c-hoathan); }

/* 6. ĐỘ KIẾP (TRIBULATION) */
.card-dokiep .level-icon, .card-dokiep .card-title { color: var(--c-dokiep); }
.card-dokiep:hover { border-color: var(--c-dokiep); box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
.card-dokiep:hover .card-border { border-color: var(--c-dokiep); }
.card-dokiep:hover .btn-read { background: var(--c-dokiep); color: #000; border-color: var(--c-dokiep); }

.card-daoto .level-icon, .card-daoto .card-title { color: var(--c-daoto); }
.card-daoto:hover { border-color: var(--c-daoto); box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
.card-daoto:hover .card-border { border-color: var(--c-daoto); }
.card-daoto:hover .btn-read { background: var(--c-daoto); color: #000; border-color: var(--c-daoto); }

/* ==========================================================================
   PHẦN 6: HIỆU ỨNG LINH KHÍ (PARTICLES CSS)
   ========================================================================== */
.particle {
    position: absolute; bottom: 0;
    width: 4px; height: 4px; background: white; border-radius: 50%;
    opacity: 0; pointer-events: none;
    animation: floatUp 5s infinite linear;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-300px) scale(1.5); opacity: 0; }
}
@keyframes spinSlow { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   PHẦN 7: RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .jade-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .jade-grid { grid-template-columns: 1fr; gap: 30px; }
    .jade-card { height: 450px; }
    .card-title { font-size: 36px; }
    .main-title { font-size: 48px; }
}
.star-field {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
.star {
    position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%;
    opacity: 0; animation: twinkle 5s infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* --- 2. HEADER THIÊN CƠ --- */
.fortune-header { text-align: center; margin-bottom: 80px; position: relative; }

/* La bàn bát quái trang trí */
.compass-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px; border: 1px solid rgba(255,255,255,0.05); border-radius: 50%;
    z-index: -1; animation: spinCompass 60s linear infinite;
}
.compass-bg::before {
    content: ''; position: absolute; inset: 20px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 50%;
}
@keyframes spinCompass { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.fh-icon { font-size: 50px; color: var(--star-gold); margin-bottom: 15px; display: inline-block; filter: drop-shadow(0 0 15px var(--star-gold)); }
.fh-title {
    font-family: var(--font-title); font-size: 60px; color: white; margin: 0;
    background: linear-gradient(to bottom, #fff, #aaa); -webkit-background-clip: text; color: transparent;
    letter-spacing: 2px;
}
.fh-subtitle {
    font-size: 16px; color: var(--mystic-purple); margin-top: 10px; letter-spacing: 4px; text-transform: uppercase;
}
.fh-desc { color: #888; margin-top: 15px; font-size: 14px; font-style: italic; }

/* --- 3. GRID HỆ THỐNG --- */
.divination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Cột trên PC */
    gap: 30px;
}

/* --- 4. THẺ DỊCH VỤ (MYSTIC CARD) --- */
.fate-card {
    background: var(--card-bg);
    border: var(--border-glass);
    border-radius: 16px;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Viền sáng chạy xung quanh khi hover */
.fate-card::after {
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--star-gold), transparent, var(--mystic-purple)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0; transition: 0.4s;
}

.fate-card:hover {
    transform: translateY(-10px);
    background: rgba(30, 35, 50, 0.8);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
}
.fate-card:hover::after { opacity: 1; }

/* Icon */
.fc-icon-box {
    width: 70px; height: 70px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; transition: 0.4s;
    font-size: 32px; color: #bbb;
}

/* Màu Icon riêng biệt */
.fate-card:hover .fc-icon-box { color: #fff; border-color: rgba(255,255,255,0.3); }
.type-east .fc-icon-box { color: var(--star-gold); } /* Á Đông */
.type-west .fc-icon-box { color: var(--mystic-purple); } /* Phương Tây */
.type-divine .fc-icon-box { color: var(--nebula-blue); } /* Gieo Quẻ */

.fate-card:hover .type-east .fc-icon-box { background: var(--star-gold); color: #000; box-shadow: 0 0 20px var(--star-gold); }
.fate-card:hover .type-west .fc-icon-box { background: var(--mystic-purple); color: #fff; box-shadow: 0 0 20px var(--mystic-purple); }
.fate-card:hover .type-divine .fc-icon-box { background: var(--nebula-blue); color: #fff; box-shadow: 0 0 20px var(--nebula-blue); }

/* Text */
.fc-title {
    font-family: var(--font-title); font-size: 20px; color: #eee; margin-bottom: 10px;
    font-weight: bold; transition: 0.3s;
}
.fate-card:hover .fc-title { color: var(--star-gold); }

.fc-desc {
    font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Button */
.fc-btn {
    margin-top: auto; /* Đẩy xuống đáy */
    padding: 8px 25px; border: 1px solid #444; border-radius: 20px;
    color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    transition: 0.3s;
}
.fate-card:hover .fc-btn {
    border-color: var(--star-gold); color: var(--star-gold); background: rgba(251, 191, 36, 0.05);
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 1024px) {
    .divination-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .divination-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .fh-title { font-size: 40px; }
    .fate-card { padding: 20px 15px; }
    .fc-icon-box { width: 50px; height: 50px; font-size: 24px; }
    .fc-title { font-size: 16px; }
}
@media (max-width: 480px) {
    .divination-grid { grid-template-columns: 1fr; }
}

.pk-header {
    text-align: center; margin-bottom: 100px; position: relative;
}
.pk-header::after {
    content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    width: 1px; height: 60px; background: linear-gradient(to bottom, var(--gold-dim), transparent);
}

.pk-icon { 
    font-size: 24px; color: var(--gold-dim); border: 1px solid var(--gold-dim); 
    border-radius: 50%; padding: 15px; margin-bottom: 20px; display: inline-block;
}
.pk-title {
    font-family: var(--font-serif); font-size: 42px; font-weight: 400; letter-spacing: 2px;
    margin: 0 0 10px 0; color: #eee;
}
.pk-sub { font-size: 13px; color: var(--text-gray); letter-spacing: 4px; text-transform: uppercase; }

/* --- 3. NHÓM KHẢO HẠCH --- */
.group-section { margin-bottom: 80px; }

.group-head {
    display: flex; align-items: center; gap: 20px; margin-bottom: 30px;
}
.group-line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); }
.group-name {
    font-family: var(--font-serif); font-size: 24px; color: var(--gold-pale); font-style: italic;
}

/* --- 4. LƯỚI THẺ BÀI (GRID) --- */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}

/* --- 5. THẺ BÀI (CARD DESIGN) --- */
.license-card {
    background: var(--bg-card);
    border: var(--border-thin);
    padding: 30px 25px;
    position: relative;
    transition: var(--transition);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Hover Effect: Sáng nhẹ & Nổi lên */
.license-card:hover {
    background: #1a1a1a;
    border-color: var(--gold-dim);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Mã Bằng Lái (Vòng tròn mảnh) */
.code-circle {
    width: 60px; height: 60px; border-radius: 50%;
    border: 1px solid var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-size: 18px; color: var(--gold-pale);
    margin-bottom: 20px; transition: var(--transition);
}
.license-card:hover .code-circle {
    background: var(--gold-pale); color: #000; border-color: var(--gold-pale);
}

/* Tên & Mô tả */
.card-name {
    font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.card-desc {
    font-size: 12px; color: var(--text-gray); margin-bottom: 25px;
    flex-grow: 1; /* Đẩy nút xuống đáy */
}

/* Nút bấm (Tối giản) */
.btn-start {
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
    color: var(--gold-dim); text-decoration: none; padding-bottom: 2px;
    border-bottom: 1px solid transparent; transition: 0.3s;
}
.license-card:hover .btn-start {
    color: var(--gold-pale); border-bottom-color: var(--gold-pale);
}

/* Icon xe mờ nền */
.bg-icon {
    position: absolute; top: 10px; right: 10px; font-size: 40px;
    color: rgba(255,255,255,0.03); pointer-events: none; transition: var(--transition);
}
.license-card:hover .bg-icon { transform: scale(1.2); color: rgba(255,255,255,0.05); }

/* Responsive */
@media (max-width: 768px) {
    .container { padding: 10px 20px; }
    .pk-title { font-size: 32px; }
    .card-grid { grid-template-columns: 1fr; }
    .menu_andi
    {
        display: none !important;
    }
}
.decree-section {
    border: 1px solid var(--ttl-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: #0000008a;
}

/* Header của Lệnh Bài */
.decree-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 25px;
    border-bottom: 1px solid var(--ttl-border);
    background: linear-gradient(to right, rgba(212,175,55,0.05), transparent);
}
.decree-title {
    font-family: var(--font-head); font-size: 18px; color: var(--ttl-gold);
    display: flex; align-items: center; gap: 10px; letter-spacing: 1px;
}
.decree-title i { animation: pulse 3s infinite; }
.decree-more {
    font-size: 12px; color: var(--ttl-date); text-decoration: none; transition: 0.3s;
}
.decree-more:hover { color: var(--ttl-gold); }

/* Danh sách Chiếu Thư (Scrollable) */
.decree-list {
    max-height: 350px; /* Chiều cao cố định, cuộn nếu dài quá */
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--ttl-border) transparent;
}
/* Custom Scrollbar Webkit */
.decree-list::-webkit-scrollbar { width: 4px; }
.decree-list::-webkit-scrollbar-track { background: transparent; }
.decree-list::-webkit-scrollbar-thumb { background: var(--ttl-border); border-radius: 2px; }

/* Từng dòng thông báo */
.decree-item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 25px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    transition: 0.3s; cursor: pointer;
}
.decree-item:last-child { border-bottom: none; }
.decree-item:hover { background: var(--ttl-hover); padding-left: 30px; }

/* Phân loại (Badge) */
.d-badge {
    font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; min-width: 70px; text-align: center;
}
.type-event { color: #10b981; border: 1px solid #10b981; } /* Sự kiện */
.type-update { color: #3b82f6; border: 1px solid #3b82f6; } /* Cập nhật */
.type-hot { color: #ef4444; border: 1px solid #ef4444; }    /* Tin nóng */
.type-sys { color: #fbbf24; border: 1px solid #fbbf24; }    /* Hệ thống */

/* Nội dung text */
.d-content { flex: 1; font-size: 14px; color: var(--ttl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decree-item:hover .d-content { color: white; }

/* Thời gian */
.d-time { font-size: 12px; color: var(--ttl-date); min-width: 80px; text-align: right; }

@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* Responsive */
@media (max-width: 600px) {
    .decree-item { flex-direction: column; align-items: flex-start; gap: 5px; }
    .d-time { text-align: left; font-size: 11px; }
    .d-content { white-space: normal; }
}
 .sect-ranking-section {
margin: 80px auto;
position: relative;
padding: 40px;
background: var(--sect-bg);
border: 1px solid #222;
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}

/* Nền núi non mờ ảo */
.sect-ranking-section::before {
content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
background-image: url("https://www.transparenttextures.com/patterns/black-scales.png");
opacity: 0.2; z-index: 0; pointer-events: none;
mask-image: linear-gradient(to top, black, transparent);
}

/* Header */
.sect-header {
text-align: center; margin-bottom: 60px; position: relative; z-index: 2;
}
.sect-header h2 {
font-family: var(--font-art); font-size: 48px; color: var(--sect-gold);
text-shadow: 0 0 20px rgba(212, 175, 55, 0.4); margin: 0;
}
.sect-header p {
font-family: var(--font-head); font-size: 14px; color: #888; 
letter-spacing: 4px; text-transform: uppercase; margin-top: 10px;
}

/* --- KHỐI TOP 3 (PODIUM) --- */
.top-sects {
display: flex; justify-content: center; align-items: flex-end; gap: 30px;
margin-bottom: 50px; position: relative; z-index: 2;
}

.sect-card {
position: relative;
background: var(--sect-panel);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 20px;
text-align: center;
backdrop-filter: blur(10px);
transition: 0.4s;
width: 280px;
display: flex; flex-direction: column; align-items: center;
}

/* Huy hiệu Tông môn (Hình thoi xoay) */
.sect-emblem {
width: 80px; height: 80px; margin-bottom: 20px;
background: #111; border: 2px solid #444;
transform: rotate(45deg); /* Xoay khung hình thoi */
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
transition: 0.4s; position: relative; overflow: hidden;
}
.sect-emblem i {
transform: rotate(-45deg); /* Xoay icon lại cho thẳng */
font-size: 32px; /* Kích thước icon chuẩn */
transition: 0.3s;
}

/* Rank 1 (Giữa - To nhất) */
.sc-rank-1 {
order: 2; height: 380px; border-color: var(--sect-gold);
background: linear-gradient(to bottom, rgba(212, 175, 55, 0.1), rgba(0,0,0,0.8));
transform: scale(1.1); box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}
.sc-rank-1 .sect-emblem { border-color: var(--sect-gold); background: #221a00; }
.sc-rank-1 .sect-emblem i { color: var(--sect-gold); text-shadow: 0 0 15px var(--sect-gold); }
.sc-rank-1::after { content: '👑'; position: absolute; top: -25px; font-size: 40px; filter: drop-shadow(0 0 10px gold); }

/* Rank 2 (Trái) */
.sc-rank-2 {
order: 1; height: 320px; border-color: var(--sect-silver);
background: linear-gradient(to bottom, rgba(160, 174, 192, 0.1), rgba(0,0,0,0.8));
}
.sc-rank-2 .sect-emblem { border-color: var(--sect-silver); background: #1a202c; }
.sc-rank-2 .sect-emblem i { color: var(--sect-silver); text-shadow: 0 0 10px var(--sect-silver); }

/* Rank 3 (Phải) */
.sc-rank-3 {
order: 3; height: 320px; border-color: var(--sect-bronze);
background: linear-gradient(to bottom, rgba(205, 127, 50, 0.1), rgba(0,0,0,0.8));
}
.sc-rank-3 .sect-emblem { border-color: var(--sect-bronze); background: #2d1b0e; }
.sc-rank-3 .sect-emblem i { color: var(--sect-bronze); text-shadow: 0 0 10px var(--sect-bronze); }

/* Thông tin trong card */
.sc-name {
font-family: var(--font-head); font-size: 22px; font-weight: bold; color: #fff;
margin-bottom: 5px; margin-top: 10px;
}
.sc-master { font-size: 12px; color: #888; margin-bottom: 15px; font-style: italic; }

.sc-stats {
width: 100%; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 15px; margin-top: auto;
display: flex; justify-content: space-between; font-size: 13px;
}
.stat-box { text-align: center; }
.stat-val { display: block; font-weight: bold; color: #ddd; font-family: var(--font-head); }
.stat-lbl { font-size: 10px; color: #666; text-transform: uppercase; }

/* Hover Effect */
.sect-card:hover { transform: translateY(-10px); z-index: 10; }
.sc-rank-1:hover { transform: scale(1.1) translateY(-10px); }
.sect-card:hover .sect-emblem { transform: rotate(225deg); box-shadow: 0 0 30px currentColor; } 
.sect-card:hover .sect-emblem i { transform: rotate(-225deg) scale(1.2); }

/* --- DANH SÁCH CÁC TÔNG CÒN LẠI (LIST) --- */
.sect-list {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; z-index: 2;
}

.sect-row {
display: flex; align-items: center;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
padding: 15px 20px; border-radius: 6px; transition: 0.3s;
}
.sect-row:hover { background: rgba(255,255,255,0.08); border-color: var(--sect-gold); transform: translateX(5px); }

.sr-rank {
font-family: var(--font-head); font-size: 18px; font-weight: bold; color: #555;
width: 40px; text-align: center; margin-right: 15px;
}
.sr-icon {
width: 40px; height: 40px; border-radius: 4px; background: #111; border: 1px solid #333;
display: flex; align-items: center; justify-content: center; color: #888; margin-right: 15px;
font-size: 18px; /* Kích thước icon nhỏ */
}
.sr-info { flex: 1; }
.sr-name { font-family: var(--font-head); font-size: 16px; color: #ddd; }
.sr-type { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: #222; border: 1px solid #444; margin-left: 10px; }

.type-good { color: var(--sect-blue); border-color: var(--sect-blue); }
.type-evil { color: var(--sect-crimson); border-color: var(--sect-crimson); }

.sr-power { font-family: var(--font-head); color: var(--sect-gold); font-size: 14px; }

/* Responsive */
@media (max-width: 900px) {
.top-sects { flex-direction: column; align-items: center; gap: 40px; }
.sc-rank-1 { order: -1; transform: scale(1); }
.sc-rank-1:hover { transform: translateY(-10px); }
.sect-list { grid-template-columns: 1fr; }
}
.guide-community-section {
    margin: 80px 0;
    position: relative;
}

/* Header khu vực */
.gc-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 40px; padding-bottom: 15px;
    border-bottom: 1px solid var(--guide-border);
}
.gc-title {
    font-family: var(--font-head); font-size: 32px; color: var(--guide-gold);
    display: flex; align-items: center; gap: 15px;
}
.gc-title i { font-size: 24px; opacity: 0.8; }

/* Nút đăng bài viết */
.btn-post-guide {
    background: transparent; border: 1px solid var(--guide-gold); color: var(--guide-gold);
    padding: 8px 20px; border-radius: 30px; font-family: var(--font-head); font-size: 14px;
    transition: 0.3s; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.btn-post-guide:hover {
    background: var(--guide-gold); color: #000; box-shadow: 0 0 15px var(--guide-gold);
}

/* Lưới bài viết */
.gc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}

/* Thẻ bài viết (Card) */
.guide-card {
    background: var(--guide-card-bg);
    border: 1px solid var(--guide-border);
    border-radius: 12px;
    padding: 25px;
    display: flex; flex-direction: column;
    transition: all 0.4s ease;
    position: relative; overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Hiệu ứng hover tinh tế */
.guide-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Dải sáng trang trí bên trái */
.guide-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0%;
    background: var(--guide-gold); transition: 0.4s;
}
.guide-card:hover::before { height: 100%; }

/* Header bài viết: Avatar + Info */
.gc-author {
    display: flex; align-items: center; gap: 12px; margin-bottom: 15px;
}
.author-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--guide-border);
}
.author-info { line-height: 1.2; }
.author-name {
    font-family: var(--font-head); font-size: 14px; color: var(--guide-gold); font-weight: bold;
}
.author-realm { font-size: 11px; color: #666; }

/* Nội dung bài viết */
.gc-content { flex: 1; margin-bottom: 20px; }
.gc-post-title {
    font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--guide-highlight);
    margin-bottom: 10px; line-height: 1.4; cursor: pointer; transition: 0.2s;
}
.gc-post-title:hover { color: var(--guide-gold); }

.gc-excerpt {
    font-size: 13px; color: var(--guide-text); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer bài viết: Tags + Stats */
.gc-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 15px; border-top: 1px dashed rgba(255,255,255,0.1); font-size: 12px;
}

.gc-tags span {
    background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 4px; color: #999; margin-right: 5px;
}

.gc-stats { display: flex; gap: 15px; color: #666; }
.gc-stats i { margin-right: 4px; color: #888; }
.guide-card:hover .gc-stats i { color: var(--guide-gold); }

/* Icon loại bài viết (Góc phải) */
.post-type-icon {
    position: absolute; top: 20px; right: 20px; font-size: 20px; color: #333;
    transition: 0.4s;
}
.guide-card:hover .post-type-icon { color: rgba(255,255,255,0.1); transform: scale(1.2); }

/* Responsive */
@media (max-width: 1024px) {
    .gc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .gc-grid { grid-template-columns: 1fr; }
    .gc-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}

.chess-container {
    margin: 60px auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

/* --- 1. BÀN CỜ (THE VOID BOARD) --- */
.board-frame {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    position: relative;
}

/* Tỉ lệ khung hình vuông */
.board-aspect {
    width: 100%;
    padding-bottom: 100%; /* Giữ tỉ lệ 1:1 */
    position: relative;
    background: radial-gradient(circle at center, #1f1f23 0%, #000000 100%);
    border: 1px solid #444;
}

/* Lưới 19x19 (Vẽ bằng CSS) */
.board-grid {
    position: absolute;
    top: 4.5%; left: 4.5%; right: 4.5%; bottom: 4.5%; /* Căn lề để quân cờ không bị méo ở biên */
    /* Vẽ dòng kẻ */
    background-image: 
        linear-gradient(var(--go-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--go-line) 1px, transparent 1px);
    /* 100% chia cho 18 ô vuông = 5.555% */
    background-size: 5.555% 5.555%;
    border-top: 1px solid var(--go-line);
    border-left: 1px solid var(--go-line);
    /* Hack nhỏ để vẽ viền phải và dưới khớp với background-size */
    box-shadow: 1px 1px 0 0 var(--go-line); 
}

/* 9 Điểm Sao (Star Points - Hoshi) */
.hoshi {
    position: absolute; width: 6px; height: 6px;
    background: var(--go-gold); border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px var(--go-gold);
}

/* Quân Cờ (Stones) */
.stone {
    position: absolute;
    width: 5%; height: 5%; /* Kích thước quân so với bàn */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    transition: 0.2s;
}

/* Quân Đen (Hắc Tử) - Hiệu ứng lỗ đen */
.stone-b {
    background: radial-gradient(circle at 30% 30%, #444, #000);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    border: 1px solid #222;
}

/* Quân Trắng (Bạch Tử) - Hiệu ứng ngọc phát sáng */
.stone-w {
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
    box-shadow: 0 0 10px rgba(255,255,255,0.4), 2px 2px 5px rgba(0,0,0,0.5);
}

/* Quân mới đánh (Marker) */
.stone.last-move::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 40%; height: 40%; border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--go-gold); /* Đen thì viền trắng */
}
.stone-w.last-move::after { border-color: #000; } /* Trắng thì viền đen */

/* --- 2. BẢNG ĐIỀU KHIỂN (CONTROL PANEL) --- */
.game-panel {
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

.panel-header {
    text-align: center; margin-bottom: 30px;
    border-bottom: 1px solid #333; padding-bottom: 15px;
}
.panel-title { font-family: var(--font-head); font-size: 24px; color: var(--go-gold); margin: 0; }
.panel-sub { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 2px; }

/* Thông tin đấu thủ */
.players-vs {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
}
.p-card { text-align: center; width: 80px; }
.p-avatar {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 10px;
    border: 2px solid #444; object-fit: cover;
}
.p-name { font-size: 14px; font-weight: bold; color: #ddd; }
.p-rank { font-size: 11px; color: var(--go-gold); }

.p-captured {
    font-size: 12px; margin-top: 5px; padding: 2px 8px; border-radius: 10px; background: #111;
}

.vs-badge {
    font-family: var(--font-art); font-size: 32px; color: #555;
}

/* Đồng hồ & Nước đi */
.game-stats {
    display: flex; justify-content: space-between; margin-bottom: 20px;
    background: #111; padding: 15px; border-radius: 6px;
}
.stat-item { text-align: center; }
.st-label { font-size: 10px; color: #666; text-transform: uppercase; }
.st-val { font-family: var(--font-head); font-size: 18px; color: #fff; }

/* Action Buttons */
.action-row { display: flex; gap: 10px; margin-top: 20px; }
.btn-action {
    flex: 1; padding: 10px; background: transparent; border: 1px solid #444;
    color: #aaa; font-family: var(--font-head); cursor: pointer; transition: 0.3s;
    border-radius: 4px;
}
.btn-action:hover { border-color: var(--go-gold); color: var(--go-gold); background: rgba(212, 175, 55, 0.05); }
.btn-surrender:hover { border-color: #ef4444; color: #ef4444; }

/* Responsive */
@media (max-width: 900px) {
    .chess-container { grid-template-columns: 1fr; max-width: 600px; }
    .board-frame { padding: 10px; }
}

.royal-scroll {
position: relative;
margin: 50px auto;
width: 94%;
max-width: 100%;
min-height: 900px; /* Chiều cao giống hình mẫu */
padding: 50px 20px;
color: var(--ink-color);

/* TẠO NỀN GIẤY CỔ (Mô phỏng hình ảnh cung cấp) */

background-size: 100% 100%;
font-family: 'Charm', cursive;
}
blockquote {
  line-height: 1;
  padding: 2%;
  margin: 2% auto;
  border-radius: 6px;
  position: relative;
}
blockquote p {
  position: relative;
  z-index: 2;
}
blockquote:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rounded);
  box-shadow: 2px 3px 10px black, 0 0 30px #8a4d0f inset;
  background: #fffef0 ;
  filter: url(#wavy2);
  z-index: 1;
}

/* Lớp phủ tạo độ sần sùi (Noise) */
.texture-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0.2; 
mix-blend-mode: multiply; 
pointer-events: none;
}

/* --- NỘI DUNG --- */
.content-inner {
position: relative;
z-index: 2;
text-align: center;
border: 2px solid transparent; /* Giữ khoảng cách an toàn */
}

/* Phụng Thiên Thừa Vận */
.edict-header {
font-family: 'Philosopher', sans-serif;
font-size: 20px;
font-weight: bold;
color: #4e342e;
text-transform: uppercase;
letter-spacing: 10px;
margin-bottom: 30px;
border-top: 3px double #4e342e;
border-bottom: 3px double #4e342e;
display: inline-block;
padding: 10px 30px;
}

/* Tiêu đề chính */
.edict-title {
font-family: 'Philosopher', sans-serif;
font-size: 56px;
margin: 0 0 40px 0;
line-height: 1.2;
background: linear-gradient(to bottom, #3e2723, #000);
-webkit-background-clip: text;
color: transparent;
text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
}

/* Nội dung sớ */
.edict-body {
font-size: 26px; /* Chữ to rõ ràng */
line-height: 1.8;
text-align: justify;
font-weight: 600;
}

.edict-body p {
margin-bottom: 25px;
text-indent: 2em; /* Thụt đầu dòng */
}

/* Chữ cái đầu rồng bay */
.drop-cap {
font-family: 'Philosopher', sans-serif;
float: left;
font-size: 3.5em;
line-height: 0.8;
padding-top: 5px;
padding-right: 10px;
color: #5d4037;
text-shadow: 2px 2px 0 rgba(255,255,255,0.2);
}

/* --- CHÂN TRANG (CHỮ KÝ & ẤN) --- */
.edict-footer {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: flex-end;
padding-right: 30px;
position: relative;
}

.date {
font-family: 'Philosopher', sans-serif;
font-size: 18px;
color: #3e2723;
font-weight: bold;
}

.emperor-sign {
font-size: 42px;
font-weight: bold;
margin-top: 10px;
color: #261006;
position: relative;
z-index: 2;
}

/* Ngọc Tỷ (Con dấu) */
.royal-seal {
position: absolute;
bottom: -20px;
right: 60px;
width: 140px;
height: 140px;
border: 6px double var(--seal-color);
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--seal-color);
font-family: 'Philosopher', sans-serif;
font-weight: bold;
font-size: 24px;
line-height: 1.1;
transform: rotate(-15deg);
opacity: 0.85;
mix-blend-mode: multiply; /* Hòa trộn vào nền giấy */
box-shadow: inset 0 0 20px rgba(185, 28, 28, 0.3);
z-index: 1;
background-image: radial-gradient(circle, rgba(185, 28, 28, 0.1), transparent);
}

/* Responsive mobile */
@media (max-width: 768px) {
.royal-scroll { padding: 50px 20px;width: 100%; background: #c79645;border-radius: 10px;}
.edict-title { font-size: 36px; }
.edict-body { font-size: 20px; }
.royal-seal { width: 100px; height: 100px; font-size: 16px; right: 20px; }
}
.menu-trigger {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #333, #000);
    border: 2px solid var(--gold);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    transition: 0.3s;
    animation: float 3s infinite ease-in-out;
}
.menu-trigger:active { transform: scale(0.9); }
.menu-trigger i { transition: 0.3s; }

/* Hiệu ứng xoay khi mở */
.menu-trigger.active i { transform: rotate(90deg); }
.menu-trigger.active { border-color: #fff; color: #fff; box-shadow: 0 0 30px rgba(255,255,255,0.5); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- 2. GIAO DIỆN MENU (SIDEBAR) --- */
.mystic-menu {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("black-scales.png");
    backdrop-filter: blur(15px);
    z-index: 999;
    transform: translateX(-100%); /* Ẩn sang trái */
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
}

.mystic-menu.open { transform: translateX(0); }

/* Background trang trí */
.menu-bg-deco {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.1; pointer-events: none; z-index: -1;
}

/* Header của Menu (User Info) */
.menu-header {
    padding: 40px 30px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.user-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    border: 2px solid var(--gold); padding: 3px;
    margin-bottom: 10px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.user-name { font-size: 22px; color: var(--gold); font-weight: bold; margin: 5px 0; }
.user-rank { font-size: 14px; color: #888; letter-spacing: 2px; text-transform: uppercase; }

/* Danh sách liên kết */
.menu-links {
    list-style: none; padding: 20px 30px; margin: 0; flex: 1;
}

.menu-item {
    display: block; padding: 15px 0;
    font-size: 18px; color: var(--text);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    transition: 0.3s;
    position: relative;
    padding-left: 40px;
    opacity: 0; transform: translateX(-20px); /* Để animation */
}

/* Icon */
.menu-item i {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    font-size: 20px; width: 30px; text-align: center;
    color: #666; transition: 0.3s;
}

/* Hover Effect */
.menu-item:hover { color: var(--gold); padding-left: 50px; text-shadow: 0 0 10px var(--gold); }
.menu-item:hover i { color: var(--gold); text-shadow: 0 0 10px var(--gold); }

/* Animation xuất hiện lần lượt */
.mystic-menu.open .menu-item { animation: slideIn 0.5s forwards; }
.mystic-menu.open .menu-item:nth-child(1) { animation-delay: 0.1s; }
.mystic-menu.open .menu-item:nth-child(2) { animation-delay: 0.2s; }
.mystic-menu.open .menu-item:nth-child(3) { animation-delay: 0.3s; }
.mystic-menu.open .menu-item:nth-child(4) { animation-delay: 0.4s; }
.mystic-menu.open .menu-item:nth-child(5) { animation-delay: 0.5s; }
.mystic-menu.open .menu-item:nth-child(6) { animation-delay: 0.6s; }
.mystic-menu.open .menu-item:nth-child(7) { animation-delay: 0.7s; }

@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}

/* Footer Menu */
.menu-footer {
    padding: 20px; text-align: center; font-size: 12px; color: #555;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .feature-card
    {
        width: 100%;
        margin-bottom: 10px;
    }
    .widget-col
    {
        display: block;
    }
    .container_ngocgian .container
    {
        padding:10px 0px;
    }
    .jade-grid
    {
        padding: 0px;
    }
    .sect-row
    {
        display: block;
        text-align: center;
    }
    .sr-icon
    {
        margin: 5px auto;
    }
    .sr-rank
    {
        margin: 5px auto;
    }
    .sc-rank-1
    {
        height: auto;
    }
    .sc-rank-2
    {
        height: auto;
    }
    .sc-rank-3
    {
        height: auto;
    }
}

 @property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.bg_daoto
{
    position: relative;
}
.bg_daoto::before,
.bg_daoto::after {
    position: absolute;
    width: 104%;
    height: 102%;
    top: -1%;
    left: -2%;
    content: "";
    border-radius: 16px;
    background-image: linear-gradient(
      var(--rotate),
      var(--purple), var(--danger));
    z-index: -1;
    transition: opacity 0.5s;
    animation: none;
    opacity: 1;
}
.bg_daoto::after{
    filter: blur(40px);
}
.bg_daoto::before,
.bg_daoto::after{
    opacity: 1;
    animation: spindaoto 1.5s linear infinite;
}

@keyframes spindaoto {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 360deg;
    }
}
.bg_daoto {
    text-shadow:  0 0px 10px var(--purple);
}

.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; background: var(--reader-gold);
    width: 0%; z-index: 1001; transition: width 0.2s;
    box-shadow: 0 0 10px var(--reader-gold);
}

/* --- 2. TOOLBAR (CÔNG CỤ TRÊN DƯỚI) --- */
.reader-toolbar {
    position: relative; 
    left: 0; width: 100%;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
    transition: transform 0.3s;
}
.toolbar-top { top: 0; }
.toolbar-bottom { bottom: 0; border-top: 1px solid #333; border-bottom: none; }

.book-info {
    font-family: var(--font-ui); font-size: 16px; color: var(--reader-gold);
    display: flex; flex-direction: column;
}
.chapter-name { font-size: 12px; color: #888; margin-top: 2px; }

.tool-btn {
    background: transparent; border: none; color: #aaa; font-size: 20px;
    cursor: pointer; margin-left: 20px; transition: 0.3s;
}
.tool-btn:hover { color: var(--reader-gold); text-shadow: 0 0 10px var(--reader-gold); }

/* --- 3. NỘI DUNG TRUYỆN (MAIN CONTENT) --- */
.reader-container {
    max-width: 800px; margin: 20px auto 150px; padding: 0 20px;
    position: relative;
}

.chapter-title {
    font-family: var(--font-ui); font-size: 32px; color: var(--reader-gold);
    text-align: center; margin-bottom: 10px;
}
.chapter-meta {
    text-align: center; font-size: 13px; color: #666; margin-bottom: 50px;
    font-family: sans-serif;
}

.chapter-content p {
    margin-bottom: 25px; text-align: justify;
}
/* Dropcap chữ cái đầu */
.chapter-content p:first-of-type::first-letter {
    font-size: 3.5em; float: left; line-height: 0.8; margin-right: 10px;
    color: var(--reader-gold); font-family: var(--font-ui);
}

/* --- 4. ĐIỀU HƯỚNG CHƯƠNG (NAVIGATOR) --- */
.chapter-nav {
    display: flex; justify-content: space-between; margin-top: 80px;
    border-top: 1px dashed #333; padding-top: 40px;
}
.nav-btn {
    padding: 12px 30px; background: transparent; border: 1px solid #444;
    color: #ccc; border-radius: 30px; cursor: pointer; font-family: var(--font-ui);
    transition: 0.3s; text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.nav-btn:hover { border-color: var(--reader-gold); color: var(--reader-gold); box-shadow: 0 0 15px rgba(212,175,55,0.1); }

/* --- 5. DANH SÁCH CHƯƠNG (DRAWER) --- */
.chapter-list-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s;
}
.chapter-drawer {
    position: fixed; top: 0; left: 0; width: 320px; height: 100%;
    background: var(--reader-panel); z-index: 2001;
    transform: translateX(-100%); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; border-right: 1px solid var(--reader-gold);
}

/* Drawer Header */
.drawer-header {
    padding: 20px; border-bottom: 1px solid #333;
    font-family: var(--font-ui); color: var(--reader-gold); font-size: 20px;
    display: flex; justify-content: space-between; align-items: center;
}

/* List Items */
.drawer-content { overflow-y: auto; flex: 1; padding: 10px; }
.chap-item {
    display: block; padding: 12px 15px; color: #aaa; text-decoration: none;
    border-bottom: 1px solid #2a2a2a; font-size: 14px; transition: 0.2s;
}
.chap-item:hover { color: white; padding-left: 20px; background: rgba(255,255,255,0.05); }
.chap-item.active { color: var(--reader-gold); border-left: 3px solid var(--reader-gold); }

/* Trạng thái mở Drawer */
.drawer-open .chapter-list-overlay { opacity: 1; visibility: visible; }
.drawer-open .chapter-drawer { transform: translateX(0); }

/* --- 6. CÀI ĐẶT (SETTINGS MODAL) --- */
.settings-modal {
    position: fixed; bottom: 80px; right: 20px; width: 250px;
    background: var(--reader-panel); border: 1px solid #444; border-radius: 8px;
    padding: 20px; z-index: 1500; display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.settings-modal.show { display: block; animation: slideUp 0.3s; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.set-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.set-label { font-size: 14px; color: #888; }
.set-btn { 
    width: 30px; height: 30px; background: #333; border: none; color: white; border-radius: 4px; cursor: pointer; 
}
.set-btn:hover { background: var(--reader-gold); color: black; }


.noidung_docbai {
    background-color: var(--reader-bg);
    color: var(--reader-text);
    font-family: var(--font-read);
    font-size: var(--size);
    line-height: var(--spacing);
    margin: 0; padding: 0;
    overflow-x: hidden;
}
.book-header {
    display: grid; grid-template-columns: 280px 1fr; gap: 40px;
    margin-bottom: 60px; position: relative;
}

/* Ảnh bìa */
.book-cover {
    position: relative; border-radius: 8px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    border: 1px solid #333;
}
.book-cover img { width: 100%; height: auto; display: block; }
.book-status {
    position: absolute; top: 10px; left: 10px;
    background: var(--gold); color: #000;
    padding: 4px 10px; font-size: 11px; font-weight: bold; border-radius: 4px;
}

/* Thông tin chi tiết */
.book-info { display: flex; flex-direction: column; justify-content: center; }

.book-title {
    font-family: var(--font-head); font-size: 48px; color: var(--gold);
    margin-bottom: 10px; line-height: 1.2;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.book-meta {
    display: flex; gap: 20px; color: var(--text-sub); font-size: 14px; margin-bottom: 25px;
}
.book-meta span i { color: var(--gold-dim); margin-right: 5px; }

.book-stats-row {
    display: flex; gap: 40px; margin-bottom: 30px;
    background: rgba(255,255,255,0.03); padding: 15px 25px; border-radius: 8px;
    border: 1px solid var(--border); width: 100%;
}
.stat-item { text-align: center; }
.stat-val { display: block; font-size: 20px; font-weight: bold; color: #fff; font-family: var(--font-head); }
.stat-lbl { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; }

.book-actions { display: flex; gap: 15px; }
.btn {
    padding: 12px 30px; border-radius: 30px; font-family: var(--font-head);
    font-size: 16px; cursor: pointer; transition: 0.3s; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}
.btn-read {
    background: var(--gold); color: #000; border: none; font-weight: bold;
}
.btn-read:hover { background: #fff; box-shadow: 0 0 20px #fff; }

.btn-mark {
    background: transparent; border: 1px solid var(--border); color: #ccc;
}
.btn-mark:hover { border-color: var(--gold); color: var(--gold); }

/* --- 3. NỘI DUNG TAB (PHẦN DƯỚI) --- */
.content-tabs {
    background: var(--bg-panel); border-radius: 12px;
    border: 1px solid var(--border); overflow: hidden;
}

/* Tab Header */
.tab-nav {
    display: flex; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2);
}
.tab-btn {
    padding: 20px 30px; cursor: pointer; font-family: var(--font-head); font-size: 16px;
    color: #888; transition: 0.3s; position: relative;
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: var(--gold); }
.tab-btn.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

/* Tab Content Area */
.tab-pane { display: none; padding: 40px; animation: fadeIn 0.5s; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Tab 1: Giới Thiệu */
.desc-text { font-size: 16px; color: #ccc; text-align: justify; margin-bottom: 20px; }

/* Tab 2: Danh sách chương */
.chapter-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
}
.chap-link {
    display: block; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 4px;
    color: #aaa; text-decoration: none; font-size: 14px; border: 1px solid transparent;
    transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chap-link:hover { color: var(--gold); border-color: var(--border); background: rgba(255,255,255,0.05); }

/* Tab 3: Bình luận */
.comment-item {
    display: flex; gap: 20px; margin-bottom: 30px; border-bottom: 1px dashed var(--border); padding-bottom: 20px;
}
.cmt-avatar { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #333; }
.cmt-content h4 { font-family: var(--font-head); color: var(--gold); font-size: 16px; margin-bottom: 5px; }
.cmt-content p { font-size: 14px; color: #ccc; }
.cmt-meta { font-size: 12px; color: #666; margin-top: 5px; }

/* Responsive */
@media (max-width: 768px) {
    .book-header { grid-template-columns: 1fr; text-align: center; }
    .book-cover { width: 200px; margin: 0 auto; }
    .book-meta, .book-stats-row, .book-actions { justify-content: center; }
    .book-title { font-size: 32px; }
    .chapter-list { grid-template-columns: 1fr; }
    .tab-nav { overflow-x: auto; }
    .tab-btn { white-space: nowrap; }
}
.header_dongphu { text-align: center; margin-bottom: 60px; }
.title_dongphu { font-size: 48px; color: white; text-shadow: 0 0 20px rgba(255,255,255,0.2); margin: 0; }
.sub_dongphu { color: #888; letter-spacing: 4px; text-transform: uppercase; font-size: 14px; margin-top: 10px; }

/* GRID */
.cave-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}

/* CARD */
.cave-card {
    position: relative; height: 580px;
    background: var(--card-bg); border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer; transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Ảnh nền động */
.cave-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: 8s ease-in-out; opacity: 0.6; filter: grayscale(30%);
}
.cave-card:hover .cave-bg { transform: scale(1.2); opacity: 0.8; filter: grayscale(0%); }

/* Overlay tối */
.overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000000e6 0%, rgb(0 0 0 / 0%) 50%, #00000000 100%);
    z-index: 1;
}

/* Hiệu ứng Hạt Linh Khí (Particles) */
.particles {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none;
}
.particle {
    position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
    opacity: 0; animation: rise 4s infinite linear;
}
@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-200px) scale(0); opacity: 0; }
}

/* Nội dung */
.content {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; z-index: 3;
}

.name { font-size: 24px; color: white; margin: 0 0 5px 0; }
.type { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; display: block; }

/* Thông số (Grid nhỏ) */
.stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;
}
.stat-box { text-align: center; }
.stat-val { font-size: 14px; font-weight: bold; color: #ddd; display: block; }
.stat-lbl { font-size: 10px; color: #666; text-transform: uppercase; }

/* Badge Cảnh Giới (Góc trên phải) */
.req-badge {
    position: absolute; top: 15px; right: 15px; z-index: 3;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    padding: 4px 10px; border-radius: 20px; font-size: 11px; color: #ccc;
    backdrop-filter: blur(5px);
}

/* --- MÀU SẮC RIÊNG BIỆT --- */
/* 1. Hỏa */
.fire:hover { border-color: var(--c-fire); box-shadow: 0 0 20px rgba(239,68,68,0.3); }
.fire .name { color: var(--c-fire); }
.fire .particle { background: var(--c-fire); box-shadow: 0 0 5px var(--c-fire); }

/* 2. Băng (Thủy) */
.ice:hover { border-color: var(--c-ice); box-shadow: 0 0 20px rgba(56,189,248,0.3); }
.ice .name { color: var(--c-ice); }
.ice .particle { background: var(--c-ice); box-shadow: 0 0 5px var(--c-ice); }

/* 3. Mộc */
.wood:hover { border-color: var(--c-wood); box-shadow: 0 0 20px rgba(34,197,94,0.3); }
.wood .name { color: var(--c-wood); }
.wood .particle { background: var(--c-wood); box-shadow: 0 0 5px var(--c-wood); }

/* 4. Kim */
.gold:hover { border-color: var(--c-gold); box-shadow: 0 0 20px rgba(234,179,8,0.3); }
.gold .name { color: var(--c-gold); }
.gold .particle { background: var(--c-gold); box-shadow: 0 0 5px var(--c-gold); }

/* 5. Thổ */
.earth:hover { border-color: var(--c-earth); box-shadow: 0 0 20px rgba(217,119,6,0.3); }
.earth .name { color: var(--c-earth); }
.earth .particle { background: var(--c-earth); box-shadow: 0 0 5px var(--c-earth); }

/* 6. Ma (Hắc Ám) */
.dark:hover { border-color: var(--c-dark); box-shadow: 0 0 20px rgba(168,85,247,0.3); }
.dark .name { color: var(--c-dark); }
.dark .particle { background: var(--c-dark); box-shadow: 0 0 5px var(--c-dark); }

/* Responsive */
@media (max-width: 1024px) { .cave-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cave-grid { grid-template-columns: 1fr; } }
.space-vortex {
    position: absolute; width: 200vmax; height: 200vmax;
    background: radial-gradient(circle, #1a1a2e 0%, #000 60%);
    opacity: 0.8; z-index: 0;
    animation: spinBg 120s linear infinite;
}
.space-vortex::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("stardust.png");
    opacity: 0.5;
}
@keyframes spinBg { 100% { transform: rotate(360deg); } }

/* --- 2. TRẬN PHÁP & HÀO QUANG --- */
.cultivation-center {
    position: relative; width: 300px; height: 300px;
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
}

/* Vòng bát quái xoay dưới nền */
.magic-circle {
    position: absolute; width: 100%; height: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 50%;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.05);
    animation: spinFast 10s linear infinite;
}
.magic-circle::before {
    content: ''; position: absolute; inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%;
    border-top: 1px solid var(--c-fire);
    border-bottom: 1px solid var(--c-water);
    animation: spinFast 5s linear infinite reverse;
}

/* Ảnh nhân vật */
.avatar-container {
    width: 200px; height: 200px; border-radius: 50%;
    position: relative; z-index: 5;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
    animation: breathe 3s ease-in-out infinite;
}
.avatar-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    border: 3px solid white;
    filter: contrast(1.2) brightness(0.9);
}
/* Mắt sáng lên (God mode) */
.avatar-container::after {
    content: ''; position: absolute; top: 38%; left: 30%; width: 40%; height: 10%;
    background: white; filter: blur(10px); opacity: 0.6;
    mix-blend-mode: overlay; animation: eyeGlow 0.2s infinite alternate;
}

@keyframes spinFast { 100% { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); box-shadow: 0 0 80px rgba(255, 255, 255, 0.4); } }
@keyframes eyeGlow { 0% { opacity: 0.3; } 100% { opacity: 0.8; } }

/* --- 3. LUỒNG KHÍ NGŨ HÀNH (ENERGY STREAMS) --- */
.energy-layer {
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; z-index: 20;
}

.stream {
    position: absolute; top: 0; left: 0;
    width: 4px; height: 350px; /* Độ dài luồng khí */
    transform-origin: top center;
    background: linear-gradient(to bottom, transparent, var(--color));
    filter: blur(2px); opacity: 0;
    border-radius: 50%;
}

/* Animation hút vào tâm: Xoay + Thu nhỏ khoảng cách */
@keyframes suckIn {
    0% { transform: rotate(var(--deg)) translateY(350px) scaleY(0.2); opacity: 0; width: 1px; }
    20% { opacity: 1; width: 6px; filter: blur(4px) brightness(1.5); }
    100% { transform: rotate(var(--deg)) translateY(0px) scaleY(1.5); opacity: 0; width: 0px; }
}

/* Tạo 5 nhóm màu */
.s-metal { --color: var(--c-metal); animation: suckIn 1.2s infinite ease-in; }
.s-wood  { --color: var(--c-wood);  animation: suckIn 1.3s infinite ease-in 0.1s; }
.s-water { --color: var(--c-water); animation: suckIn 1.1s infinite ease-in 0.2s; }
.s-fire  { --color: var(--c-fire);  animation: suckIn 1.4s infinite ease-in 0.3s; }
.s-earth { --color: var(--c-earth); animation: suckIn 1.2s infinite ease-in 0.4s; }

/* --- 4. HẠT NĂNG LƯỢNG (PARTICLES JS) --- */
.particle-container {
    position: absolute; inset: 0; pointer-events: none; z-index: 15;
}
.dot {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 10px var(--color);
    offset-path: path("M100,100 L0,0"); /* Đường đi hướng tâm */
    animation: flyToCenter 1.5s linear forwards;
    opacity: 0;
}

@keyframes flyToCenter {
    0% { transform: translate(var(--sx), var(--sy)) scale(0.5); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(0, 0) scale(0.1); opacity: 0; }
}

/* --- 5. CHỮ CẢNH BÁO --- */
.danger-text {
    position: absolute; bottom: 10%; width: 100%; text-align: center;
    z-index: 30; text-transform: uppercase;
}
.main-txt {
    font-family: '--font-art';, cursive; font-size: 48px; color: transparent;
    background: linear-gradient(to right, #fff, var(--c-fire), #fff);
    -webkit-background-clip: text;
    animation: textShake 0.2s infinite;
}
.sub-txt {
    font-size: 14px; color: var(--c-water); letter-spacing: 5px; margin-top: 10px;
    animation: pulseText 1s infinite alternate;
}

@keyframes textShake { 0% { transform: translate(1px, 1px); } 100% { transform: translate(-1px, -1px); } }
@keyframes pulseText { from { opacity: 0.5; letter-spacing: 5px; } to { opacity: 1; letter-spacing: 10px; } }

/* Sét đánh (Thunder) */
.thunder {
    position: absolute; inset: 0; background: white; opacity: 0; z-index: 40; pointer-events: none;
    animation: flash 4s infinite;
}
@keyframes flash { 0%, 95% { opacity: 0; } 96% { opacity: 0.1; } 97% { opacity: 0; } 98% { opacity: 0.05; } 100% { opacity: 0; } }
.noidung_tuluyen {
    margin: 0; padding: 0;
    background-color: var(--bg-core);
    height: 699px; width: 100%;
    overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    font-family: '--font-art';
    position: relative;
}

.arena {
    position: relative; width: 100%; height: 100%;

    overflow: hidden;
}
/* Hiệu ứng rung */
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-3px, 0, 0); } 20%, 80% { transform: translate3d(3px, 0, 0); } }

/* --- 2. NHÂN VẬT --- */
.fighter {
    position: absolute; bottom: 20%; width: 380px; height: 380px;
    transition: transform 0.1s; z-index: 10;
}
.fighter img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255,255,255,0.3)); }

#p1 { left: 15%; }
#p2 { right: 15%; } /* Quay mặt lại */

/* Animation Tấn công */
.atk-right { animation: lungRight 0.4s forwards; }
@keyframes lungRight { 50% { left: 45%; transform: scale(1.2); } }

.atk-left { animation: lungLeft 0.4s forwards; }
@keyframes lungLeft { 50% { right: 45%; transform: scaleX(-1) scale(1.2); } }

/* Hiệu ứng Trúng đòn */
.hit { animation: hitFlash 0.3s; }
@keyframes hitFlash { 
    0% { filter: brightness(3) sepia(1) hue-rotate(-50deg); transform: translateX(0); }
    20% { transform: translateX(-20px); }
    100% { filter: none; transform: translateX(0); }
}

/* Hiệu ứng Chết */
.dead { filter: grayscale(100%) brightness(0.3); transform: rotate(90deg) translateY(100px) !important; transition: 1s; }

/* --- 3. HUD (MÁU) --- */
.hud {
    position: absolute; top: 20px; width: 100%; padding: 0 40px;
    display: flex; justify-content: space-between; z-index: 50;
}
.bar-box { width: 40%; }
.name { font-size: 24px; color: white; font-weight: bold; text-shadow: 0 0 10px currentColor; margin-bottom: 5px; }
.hp-bg { height: 25px; background: #333; border: 2px solid #555; transform: skewX(-20deg); overflow: hidden; }
.hp-fill { height: 100%; width: 100%; transition: width 0.2s ease-out; }

/* --- 4. VFX (HIỆU ỨNG) --- */
.slash {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
    width: 0; height: 5px; background: white; box-shadow: 0 0 30px white, 0 0 50px yellow;
    z-index: 20; border-radius: 50%;
}
.slash-anim { animation: slash 0.2s ease-out; }
@keyframes slash { 0% { width: 0; opacity: 1; transform: translate(-50%, -50%) rotate(45deg); } 100% { width: 600px; opacity: 0; transform: translate(-50%, -50%) rotate(45deg); } }

.dmg-txt {
    position: absolute; font-family: 'Charm', cursive; font-size: 50px; font-weight: bold;
    color: #ffeb3b; text-shadow: 2px 2px 0 #b91c1c; pointer-events: none; z-index: 30;
    animation: floatUp 1s forwards;
}
@keyframes floatUp { to { transform: translateY(-100px); opacity: 0; } }

/* --- 5. MÀN HÌNH KẾT THÚC --- */
.victory-screen {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}
.vic-title {
    font-family: 'Charm', cursive; font-size: 80px; color: gold;
    text-shadow: 0 0 30px gold; animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vic-name { font-size: 40px; color: white; margin-top: 20px; }
.btn-restart {
    margin-top: 50px; padding: 15px 40px; background: gold; color: black;
    border: none; font-size: 20px; cursor: pointer; font-weight: bold;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}
@keyframes zoomIn { from { transform: scale(0); } to { transform: scale(1); } }


/* --- 2. HEADER --- */
.rank-header { text-align: center; margin-bottom: 50px; position: relative; }
.rank-title {
    font-family: var(--font-head); font-size: 48px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px; margin: 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
.rank-sub { font-size: 14px; color: #888; letter-spacing: 4px; margin-top: 10px; text-transform: uppercase; }
.divider {
    width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 20px auto;
}

/* --- 3. DANH SÁCH (LIST) --- */
.rank-list { display: flex; flex-direction: column; gap: 20px; }

/* --- 4. THẺ THIÊN KIÊU (CARD ITEM) --- */
.hero-card {
    display: flex; align-items: center;
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 20px;
    backdrop-filter: blur(10px);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden;
}

.hero-card:hover {
    transform: scale(1.02);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Hiệu ứng ánh sáng lướt qua */
.hero-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-25deg); transition: 0.5s;
}
.hero-card:hover::before { left: 100%; }

/* Số thứ tự (Rank Number) */
.rank-num {
    font-family: var(--font-num); font-size: 32px; font-weight: bold;
    width: 60px; text-align: center; margin-right: 20px;
    color: #555; text-shadow: 0 2px 5px black;
}

/* Avatar */
.hero-avatar {
    position: relative; margin-right: 25px;
}
.hero-img {
    width: 70px; height: 70px; border-radius: 50%; object-fit: cover;
    border: 2px solid #333; transition: 0.3s;
}
.hero-card:hover .hero-img { border-color: var(--gold); box-shadow: 0 0 15px var(--gold); }

/* Thông tin */
.hero-info { flex: 1; }
.hero-name {
    font-family: var(--font-head); font-size: 20px; font-weight: bold; color: #fff;
    margin-bottom: 5px; display: flex; align-items: center; gap: 10px;
}
.hero-sect { font-size: 13px; color: #888; font-style: italic; }
.hero-realm {
    display: inline-block; background: rgba(255,255,255,0.1); 
    padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--gold); margin-left: 10px;
}

/* Chỉ số chiến lực */
.hero-power {
    text-align: right; margin-right: 30px;
}
.power-val { font-family: var(--font-num); font-size: 18px; color: #ef4444; font-weight: bold; }
.power-label { font-size: 10px; color: #666; text-transform: uppercase; }

/* Nút Khiêu Chiến */
.btn-challenge {
    background: linear-gradient(135deg, #3a0a0a, #000);
    border: 1px solid var(--crimson); color: var(--crimson);
    padding: 10px 25px; font-family: var(--font-head); font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    transition: 0.3s; position: relative; z-index: 2;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}
.btn-challenge:hover {
    background: var(--crimson); color: #fff;
    box-shadow: 0 0 20px var(--crimson);
}
.btn-challenge i { margin-right: 5px; }


/* --- STYLE RIÊNG CHO TOP 3 --- */

/* Top 1 */
.rank-1 { border: 1px solid var(--gold); background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent); }
.rank-1 .rank-num { color: var(--gold); font-size: 42px; text-shadow: 0 0 15px var(--gold); }
.rank-1 .hero-img { border-color: var(--gold); width: 90px; height: 90px; }
.rank-1::after { content: '👑'; position: absolute; top: 10px; left: 10px; font-size: 20px; }

/* Top 2 */
.rank-2 { border-left: 4px solid var(--silver); }
.rank-2 .rank-num { color: var(--silver); font-size: 36px; }

/* Top 3 */
.rank-3 { border-left: 4px solid var(--bronze); }
.rank-3 .rank-num { color: var(--bronze); font-size: 36px; }

/* Responsive */
@media (max-width: 768px) {
    .hero-card { flex-direction: column; text-align: center; padding: 25px; }
    .rank-num { margin: 0 0 10px 0; }
    .hero-avatar { margin: 0 0 15px 0; }
    .hero-info { margin-bottom: 15px; }
    .hero-name { justify-content: center; flex-direction: column; gap: 5px; }
    .hero-power { text-align: center; margin: 0 0 15px 0; }
    .btn-challenge { width: 100%; }
}
.bounty-header { text-align: center; margin-bottom: 60px; position: relative; }
.bounty-icon { font-size: 60px; color: var(--blood); margin-bottom: 10px; filter: drop-shadow(0 0 15px var(--blood)); animation: pulse 2s infinite; }
.bounty-title {
    font-family: var(--font-head); font-size: 48px; color: var(--blood-light);
    text-transform: uppercase; letter-spacing: 3px; margin: 0;
    text-shadow: 0 0 20px rgba(185, 28, 28, 0.5);
}
.bounty-sub { font-size: 14px; color: #666; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px; }

@keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* GRID DANH SÁCH */
.bounty-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
}

/* THẺ TRUY SÁT (WANTED CARD) */
.wanted-card {
    display: flex; background: var(--card-bg);
    border: 1px solid #330a0a; border-radius: 4px;
    position: relative; overflow: hidden;
    transition: 0.4s;
}
.wanted-card:hover {
    transform: translateY(-5px);
    border-color: var(--blood);
    box-shadow: 0 0 30px rgba(185, 28, 28, 0.2);
}

/* Hiệu ứng máu chảy viền (Giả lập) */
.wanted-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--blood); box-shadow: 0 0 10px var(--blood);
    opacity: 0; transition: 0.4s;
}
.wanted-card:hover::before { opacity: 1; }

/* Ảnh tội phạm */
.wanted-img-box {
    width: 140px; position: relative; flex-shrink: 0;
}
.wanted-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.2); transition: 0.4s;
}
.wanted-card:hover .wanted-img { filter: grayscale(0%) contrast(1.1); }

/* Tem "SÁT" (KILL) */
.stamp-kill {
    position: absolute; top: 10px; left: 10px;
    width: 40px; height: 40px; border: 2px solid var(--blood); border-radius: 50%;
    color: var(--blood); font-family: var(--font-head); font-weight: bold; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-20deg); text-shadow: 0 0 5px var(--blood);
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}

/* Thông tin */
.wanted-info {
    flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
}

.w-name {
    font-family: var(--font-head); font-size: 22px; color: #eee; margin-bottom: 5px;
    display: flex; justify-content: space-between; align-items: center;
}
.w-rank { font-size: 12px; color: #888; border: 1px solid #333; padding: 2px 6px; border-radius: 3px; }

.w-crime { font-size: 13px; color: #aaa; font-style: italic; margin-bottom: 15px; line-height: 1.4; }

.w-reward {
    font-family: var(--font-head); font-size: 18px; color: var(--gold); font-weight: bold;
    display: flex; align-items: center; gap: 5px;
}

/* Nút Truy Sát */
.btn-hunt {
    position: absolute; bottom: 20px; right: 20px;
    background: transparent; border: 1px solid var(--blood); color: var(--blood);
    padding: 8px 20px; font-family: var(--font-scary); font-size: 16px; letter-spacing: 1px;
    cursor: pointer; transition: 0.3s; overflow: hidden;
}
.btn-hunt:hover {
    background: var(--blood); color: black;
    box-shadow: 0 0 20px var(--blood);
    text-shadow: none;
}
.btn-hunt i { margin-right: 5px; font-size: 14px; }

/* Xếp hạng Top 3 nổi bật */
/*.top-1 { border-color: var(--blood); background: linear-gradient(to right, #1a0505, #0a0000); }*/
.top-1 .w-name { color: var(--blood-light); font-size: 26px; }
.top-1 .stamp-kill { color: var(--blood-light); border-color: var(--blood-light); box-shadow: 0 0 10px var(--blood); }

/* Responsive */
@media (max-width: 768px) {
    .bounty-grid { grid-template-columns: 1fr; }
    .wanted-card { height: auto; }
    .wanted-img-box { width: 120px; }
}
.match-list { display: flex; flex-direction: column; gap: 20px; }

/* CARD */
.match-card {
    display: flex; align-items: center;
    background: var(--bg-panel); border: var(--border);
    padding: 20px; border-radius: 8px;
    transition: 0.3s; cursor: pointer;
    position: relative; overflow: hidden;
}

/* Hiệu ứng Hover */
.match-card:hover {
    transform: translateX(10px);
    border-color: var(--gold);
    background: linear-gradient(90deg, #2e261f, #26201a);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Bàn cờ nhỏ (Thumbnail) */
.board-thumb {
    width: 100px; height: 100px; flex-shrink: 0;
    background: #dcb35c; border: 4px solid #5d4037;
    position: relative; margin-right: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    background-image: 
        linear-gradient(#3e2723 1px, transparent 1px),
        linear-gradient(90deg, #3e2723 1px, transparent 1px);
    background-size: 20% 20%; /* 5x5 grid giả lập */
}
/* Quân cờ trang trí */
.board-thumb::after {
    content: ''; position: absolute; top: 30%; left: 40%;
    width: 12px; height: 12px; background: black; border-radius: 50%;
    box-shadow: 20px 20px 0 white, -10px 30px 0 black;
}

/* Thông tin */
.match-info { flex: 1; }

.match-title {
    font-family: 'Philosopher', sans-serif; font-size: 20px; color: #fff; margin-bottom: 5px;
}
.match-card:hover .match-title { color: var(--gold); }

.match-meta { font-size: 13px; color: var(--text-sub); display: flex; gap: 15px; margin-bottom: 10px; }
.match-meta i { margin-right: 5px; color: var(--gold); }

/* Đối thủ */
.players { display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: bold; }
.vs { color: var(--text-sub); font-style: italic; font-weight: normal; font-size: 14px; }

.p-black { color: #aaa; display: flex; align-items: center; gap: 8px; }
.p-black::before { content:''; width: 12px; height: 12px; background: black; border-radius: 50%; border: 1px solid #555; }

.p-white { color: #fff; display: flex; align-items: center; gap: 8px; }
.p-white::before { content:''; width: 12px; height: 12px; background: white; border-radius: 50%; }

/* Kết quả */
.result-tag {
    padding: 5px 15px; border: 1px solid var(--border); border-radius: 20px;
    font-size: 12px; color: var(--gold); text-transform: uppercase;
    margin-left: auto; /* Đẩy sang phải cùng */
}

/* Responsive */
@media (max-width: 600px) {
    .match-card { flex-direction: column; text-align: center; }
    .board-thumb { margin: 0 0 20px 0; }
    .match-meta { justify-content: center; }
    .players { justify-content: center; }
    .result-tag { margin: 20px auto 0; }
}
.pagination{margin:auto;width:auto;text-align:center;margin-top:10px}
.pagination .pages li.prev{margin-right:15px}
.pagination .pages li.next{margin-left:15px}
.pagination .pages li{display:inline-block;margin:5px 2px}
.pagination .pages li a{height:25px;padding:4px 8px;text-decoration:none;color:#666;font-weight:700;border:1px solid #d5d5d5;font-size:11px}
.pagination .pages li a:hover{background:#f6f6f6}
.pagination .pages li .active{background:#424852;color:#fff;border-color:#424852}
.pagination .pages li .active:hover{background:#2a313d}
.pages_ajax{display:inline-block}
.pages_ajax li{display:inline-block;margin:5px 2px;height:25px;padding:4px 8px;text-decoration:none;color:#666;font-weight:700;border:1px solid #d5d5d5;font-size:11px;box-sizing:border-box;min-width:30px;cursor:pointer}
.pages_ajax li.actived,.pages_ajax li:hover{background:#2a313d;color:#fff}