/* File: css/style.css */

/* === RESET & BASIC === */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body { font-family: Arial, Helvetica, sans-serif; background:#000; color:#fff; line-height:1.5; }
img { max-width:100%; vertical-align:middle; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
.clearfix::after { content:""; display:block; clear:both; }

/* === LAYOUT === */
.container { max-width:1024px; margin:0 auto; padding:0 15px; }
.toplinks { background:rgba(0,0,0,0.7); padding:10px 0; text-align:right; }
.toplinks ul { float:left; }
.toplinks li { display:inline-block; margin-right:15px; }
.toplinks .icon-like { display:inline-block; width:20px; height:20px; background:url(../img/icon-like.png) no-repeat center; }
.login-logout { display:inline-block; }

.page { position:relative; }

/* === CHARACTER NAV - TÁI SỬ DỤNG NHANVAT.PNG === */
.nhanvat { margin:30px 0; text-align:center; }
.nhanvat .title h2 { font-size:28px; margin-bottom:15px; color:#ffcc00; }
.nhanvat ul.char-list {
    font-size: 0;
    letter-spacing: -4px;
    word-spacing: -4px;
    text-align: left;
    vertical-align: bottom;
    position: relative;
    margin: 20px 0;
    padding-left: 10px;
}

.nhanvat ul.char-list li {
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    vertical-align: bottom;
    height: 157px;
    position: relative;
}

.nhanvat ul.char-list li a {
    text-indent: -10000px;
    display: block;
    height: 157px;
    position: absolute;
    bottom: 23px;
    background: url('../img/nhanvat.png') no-repeat;
}

/* === VỊ TRÍ & KÍCH THƯỚC TỪNG NHÂN VẬT === */
.nhanvat ul li a.kysi    { background-position: 0 0;     width: 138px; left: 0; }
.nhanvat ul li a.thosan  { background-position: 0 -157px; width: 182px; left: 145px; }
.nhanvat ul li a.phapsu  { background-position: 0 -314px; width: 143px; left: 290px; }
.nhanvat ul li a.phuthuy { background-position: 0 -471px; width: 153px; left: 436px; }

/* === HOVER & ACTIVE (dùng cột phải của sprite) === */
.nhanvat ul li a.kysi:hover,    .nhanvat ul li.current a.kysi    { background-position: -182px 0; }
.nhanvat ul li a.thosan:hover,  .nhanvat ul li.current a.thosan  { background-position: -182px -157px; }
.nhanvat ul li a.phapsu:hover,  .nhanvat ul li.current a.phapsu  { background-position: -182px -314px; }
.nhanvat ul li a.phuthuy:hover, .nhanvat ul li.current a.phuthuy { background-position: -182px -471px; }


/* === CONTENT BLOCK === */
.content { display:none; padding:20px; background:rgba(20,20,20,0.9); border-radius:8px; margin-bottom:30px; }
.content.active { display:block; animation:fadeIn .5s; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.char { position:absolute; right:-590px; top:0; width:590px; height:100%; background:url(../img/char-placeholder.jpg) no-repeat right center; background-size:contain; pointer-events:none; }

/* === LAYER NHANVAT === */
.layer-nhanvat { margin-bottom:20px; }
.layer-nhanvat h2 { font-size:36px; margin-bottom:10px; }
.thongtin { margin:15px 0; font-size:14px; }
.thongtin.organce { color:#ff9900; }
.thongtin.brown { color:#cc9966; }
.thongtin.blue { color:#6699ff; }
.thongtin.purple { color:#cc66cc; }
.layer-nhanvat p { margin:10px 0; }

.line { height:1px; background:#444; margin:20px 0; }

/* === BACKGROUND & WEAPON === */
.layer-boicanh, .layer-vukhi { margin-bottom:30px; }
.layer-boicanh h4, .layer-vukhi h4 { font-size:20px; margin-bottom:15px; color:#ffcc00; }
.layer-boicanh .img, .layer-vukhi .img { float:left; width:200px; margin-right:20px; border:2px solid #444; }
.layer-boicanh p, .layer-vukhi p { margin-bottom:15px; }
.btn-wrap { text-align:right; margin-top:10px; }
.btn-wrap a { display:inline-block; margin-left:10px; padding:5px 15px; background:#555; color:#fff; border-radius:3px; cursor:pointer; }
.btn-wrap a.active { background:#ffcc00; color:#000; }

/* === SKILLS SECTION === */
.kynang { clear:both; }
.kynang .title h2 { font-size:24px; margin-bottom:15px; color:#ffcc00; }
.tab { display:flex; gap:10px; margin-bottom:15px; border-bottom:2px solid #444; }
.tab a { padding:8px 16px; background:#333; color:#aaa; border-radius:5px 5px 0 0; }
.tab a.current { background:#ffcc00; color:#000; }

.ct-tab { max-height:500px; overflow-y:auto; padding-right:10px; }
.ct-tab::-webkit-scrollbar { width:8px; }
.ct-tab::-webkit-scrollbar-track { background:#222; border-radius:4px; }
.ct-tab::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }
.ct-tab::-webkit-scrollbar-thumb:hover { background:#777; }

.nd-tab { display:none; }
.nd-tab.active { display:block; }
.nd-tab ul { display:grid; gap:15px; }
.nd-tab li { display:flex; align-items:flex-start; background:#1a1a1a; padding:10px; border-radius:5px; }
.nd-tab li img { width:60px; height:60px; margin-right:15px; border:1px solid #444; }
.nd-tab .wrap h4 { font-size:16px; margin-bottom:5px; color:#ffcc00; }
.nd-tab .wrap p { font-size:14px; color:#ccc; }
/* === NHÂN VẬT - GIỐNG HỆT TRANG GỐC 2015 === */
.content {
    position: relative;
    overflow: visible;
    padding-right: 600px; /* Đẩy nội dung sang trái để chừa chỗ cho nhân vật */
    min-height: 800px;
}

.char {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.content.active .char {
    opacity: 1;
}

/* === TỪNG NHÂN VẬT === */
.nv1 .char { background-image: url('../img/kysi.png'); }
.nv2 .char { background-image: url('../img/thosan.png'); }
.nv3 .char { background-image: url('../img/phapsu.png'); }
.nv4 .char { 
    background-image: url('../img/phuthuy.png'); 
    bottom: 10px;
    background-position: bottom right;
}

/* === ĐẨY NỘI DUNG QUA TRÁI ĐỂ CHỪA CHỖ === */
.layer-nhanvat,
.layer-boicanh,
.layer-vukhi,
.kynang {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* === RESPONSIVE: ẨN NHÂN VẬT TRÊN MOBILE === */
@media (max-width: 992px) {
    .content {
        padding-right: 0;
        min-height: auto;
    }
    .char { display: none; }
    .layer-nhanvat,
    .layer-boicanh,
    .layer-vukhi,
    .kynang {
        max-width: 100%;
    }
}
/* === RESPONSIVE === */
@media (max-width:768px) {
    .char { display:none; }
    .nhanvat ul.char-list { 
        text-align: center; 
        padding-left: 0;
    }
    .nhanvat ul.char-list li { 
        display: block; 
        height: auto; 
        margin-bottom: 20px;
    }
    .nhanvat ul.char-list li a {
        position: static;
        margin: 0 auto;
    }
    .layer-boicanh .img, .layer-vukhi .img { float:none; display:block; margin:0 auto 15px; }
}