/* =========================================================
   SHAIYA THIẾT HUYẾT - HOMEPAGE V2
   Chỉ dùng prefix .th- để không ảnh hưởng các trang cũ.
========================================================= */

.th-main{
    --th-red:#b91f1f;
    --th-red-dark:#680b0b;
    --th-red-light:#ef4a35;
    --th-gold:#e5b45d;
    --th-gold-light:#f7d894;
    --th-bg:#060708;
    --th-panel:#0d0f11;
    --th-text:#f3f1ed;
    --th-muted:#a5a7a9;
    color:var(--th-text);
    background:var(--th-bg);
    overflow:hidden;
}

.th-main *{box-sizing:border-box}
.th-main .container{width:min(1320px,calc(100% - 42px));margin:0 auto}
.th-main a{text-decoration:none}

/* HERO */
.th-hero{
    position:relative;
    min-height:780px;
    display:flex;
    align-items:center;
    isolation:isolate;
    background:#050607;
    overflow:hidden;
}

.th-hero-bg{
    position:absolute;
    inset:0;
    z-index:-4;
    background:
        linear-gradient(90deg,rgba(3,4,5,.97) 0%,rgba(3,4,5,.72) 42%,rgba(3,4,5,.2) 100%),
        linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.86)),
        url('../img/level15-bg.png') center/cover no-repeat;
    transform:scale(1.03);
}

.th-hero-vignette{
    position:absolute;
    inset:0;
    z-index:-3;
    background:
        radial-gradient(circle at 72% 45%,rgba(194,35,23,.18),transparent 26%),
        radial-gradient(circle at 25% 65%,rgba(238,177,74,.08),transparent 32%);
}

.th-hero-lines{
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.16;
    background-image:
        linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.25) 48.2%,transparent 48.5%),
        linear-gradient(295deg,transparent 0 58%,rgba(211,45,34,.35) 58.2%,transparent 58.5%);
    pointer-events:none;
}

.th-hero-inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    padding:105px 0 125px;
}

.th-hero-copy{max-width:720px}

.th-status{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border:1px solid rgba(229,180,93,.32);
    background:rgba(0,0,0,.36);
    color:var(--th-gold-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.th-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ef4033;
    box-shadow:0 0 13px #ef4033;
}

.th-version{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:25px;
    color:#bfc0c1;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.th-version i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--th-red-light);
}

.th-hero h1{
    margin:16px 0 8px;
    color:#fff;
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(72px,10vw,144px);
    line-height:.77;
    letter-spacing:-5px;
    text-shadow:0 5px 25px rgba(0,0,0,.8);
}

.th-hero h1 em{
    color:#d52d27;
    font-style:normal;
    text-shadow:0 0 35px rgba(205,36,26,.2);
}

.th-lead{
    max-width:650px;
    margin:34px 0 0;
    color:#c4c5c6;
    font-size:16px;
    line-height:1.85;
}

.th-lead strong{color:#f0d59f}

.th-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}

.th-btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    padding:0 21px;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.2px;
    transition:.25s ease;
}

.th-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,#c42a22,#7c0d0c);
    border:1px solid #e14337;
    box-shadow:0 8px 30px rgba(131,15,12,.28);
}

.th-btn-primary b{font-size:19px;font-weight:500}
.th-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(184,25,20,.4)}

.th-btn-ghost{
    color:#eee;
    border:1px solid rgba(255,255,255,.27);
    background:rgba(0,0,0,.24);
}

.th-btn-ghost:hover{
    border-color:var(--th-gold);
    color:var(--th-gold-light);
    background:rgba(229,180,93,.05);
}

.th-open{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:31px;
}

.th-open span{
    color:#777b7e;
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
}

.th-open strong{
    color:#e6bb69;
    font-size:14px;
}

.th-hero-emblem{
    position:relative;
    width:400px;
    height:400px;
    flex:0 0 400px;
    display:grid;
    place-items:center;
    opacity:.9;
}

.th-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(226,169,78,.22);
}

.th-ring-1{inset:0}
.th-ring-2{inset:34px;border-color:rgba(213,44,34,.3);border-style:dashed;animation:th-spin 30s linear infinite}
.th-ring-3{inset:78px;border-color:rgba(226,169,78,.18)}

.th-emblem-core{
    width:190px;
    height:190px;
    display:grid;
    place-items:center;
    align-content:center;
    border-radius:50%;
    background:
        radial-gradient(circle,#231615 0%,#0b0c0d 68%);
    border:1px solid rgba(230,178,85,.5);
    box-shadow:
        0 0 0 15px rgba(0,0,0,.18),
        0 0 70px rgba(180,33,25,.17),
        inset 0 0 35px rgba(213,44,34,.1);
}

.th-emblem-core span{
    color:#d9ad60;
    font:800 68px/1 Georgia,serif;
    letter-spacing:-7px;
    margin-left:-7px;
}

.th-emblem-core small{
    margin-top:11px;
    color:#8c8e90;
    font-size:10px;
    font-weight:900;
    letter-spacing:4px;
}

.th-scroll{
    position:absolute;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:9px;
    color:#777;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.th-scroll i{
    width:1px;
    height:35px;
    background:linear-gradient(#b78a4c,transparent);
}

@keyframes th-spin{to{transform:rotate(360deg)}}

/* STATS */
.th-stats{
    position:relative;
    background:#0a0c0e;
    border-top:1px solid rgba(229,180,93,.16);
    border-bottom:1px solid rgba(229,180,93,.14);
}

.th-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.th-stat{
    min-height:115px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 25px;
    border-right:1px solid #202326;
}

.th-stat:last-child{border-right:0}

.th-stat-number{
    color:var(--th-gold);
    font-family:Georgia,serif;
    font-size:39px;
    line-height:1;
}

.th-stat small{
    display:block;
    margin-bottom:6px;
    color:#6f7376;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.7px;
}

.th-stat strong{
    color:#d8d9da;
    font-size:12px;
}

/* GENERAL */
.th-section{position:relative;padding:105px 0}

.th-section-label{
    color:#b78a4b;
    font-size:10px;
    font-weight:900;
    letter-spacing:2.5px;
}

.th-intro{background:#080a0c}

.th-intro-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;
    margin-top:35px;
}

.th-intro h2,
.th-section-head h2,
.th-boss-copy h2,
.th-equipment h2,
.th-final h2{
    margin:0;
    font-family:Georgia,'Times New Roman',serif;
    color:#eee;
    font-size:clamp(39px,5vw,67px);
    line-height:.98;
    letter-spacing:-2px;
}

.th-intro h2 span,
.th-section-head h2 span,
.th-boss-copy h2 span,
.th-equipment h2 span,
.th-final h2 span{color:#c92a25}

.th-intro-text{
    padding-top:6px;
    color:#9fa2a5;
    font-size:15px;
    line-height:1.9;
}

.th-intro-text p{margin:0 0 20px}

/* FEATURES */
.th-features{
    background:
        linear-gradient(rgba(6,8,9,.95),rgba(6,8,9,.98)),
        url('../img/level15-bg.png') center/cover fixed;
}

.th-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
}

.th-section-head h2{margin-top:12px}

.th-section-head>p{
    max-width:410px;
    margin:0 0 5px;
    color:#8f9295;
    font-size:14px;
    line-height:1.8;
}

.th-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-top:55px;
    background:#27292b;
    border:1px solid #27292b;
}

.th-feature-card{
    position:relative;
    min-height:310px;
    padding:32px;
    background:linear-gradient(145deg,#111416,#0b0d0f);
    overflow:hidden;
}

.th-feature-card:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-80px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(192,37,29,.08);
}

.th-feature-number{
    color:#505458;
    font:700 12px/1 Arial,sans-serif;
    letter-spacing:2px;
}

.th-feature-icon{
    margin-top:42px;
    color:#dcae5c;
    font-size:30px;
}

.th-feature-card h3{
    margin:18px 0 11px;
    color:#eee;
    font-size:15px;
    letter-spacing:1px;
}

.th-feature-card p{
    max-width:320px;
    margin:0;
    color:#85898c;
    font-size:13px;
    line-height:1.8;
}

/* BOSS */
.th-boss{
    min-height:610px;
    display:flex;
    align-items:center;
    background:#070809;
    overflow:hidden;
}

.th-boss-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,#070809 8%,rgba(7,8,9,.9) 38%,rgba(7,8,9,.42) 100%),
        url('../img/level15-bg.png') center/cover no-repeat;
    opacity:.7;
}

.th-boss-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr 480px;
    align-items:center;
    gap:90px;
}

.th-boss-copy p{
    max-width:510px;
    margin:28px 0 0;
    color:#999da0;
    line-height:1.85;
}

.th-boss-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:27px;
}

.th-boss-tags span{
    padding:8px 12px;
    color:#b8babb;
    border:1px solid #343638;
    background:rgba(0,0,0,.3);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.th-boss-panel{
    padding:25px;
    background:rgba(8,10,11,.88);
    border:1px solid rgba(218,166,80,.35);
    box-shadow:0 25px 60px rgba(0,0,0,.55);
}

.th-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:18px;
    border-bottom:1px solid #2b2d2f;
}

.th-panel-top span{
    color:#cda15a;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.8px;
}

.th-panel-top b{
    color:#e7574d;
    font-size:9px;
    letter-spacing:1px;
}

.th-boss-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 4px;
    border-bottom:1px solid #242628;
}

.th-boss-row small{
    display:block;
    margin-bottom:5px;
    color:#64686a;
    font-size:8px;
    letter-spacing:1.5px;
}

.th-boss-row strong{color:#e1e2e3;font-size:14px}
.th-boss-row>b{color:#dcae5c;font-size:11px}

.th-panel-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:19px;
    padding:13px;
    color:#85898c;
    background:rgba(205,156,73,.05);
    font-size:11px;
    line-height:1.6;
}

.th-panel-note span{color:#e0ad58}

/* EQUIPMENT */
.th-equipment{background:#0a0c0e}

.th-equipment-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    margin-top:35px;
    align-items:start;
}

.th-equipment-grid>div:first-child p{
    max-width:500px;
    margin-top:28px;
    color:#8d9194;
    line-height:1.85;
}

.th-checks{
    border-top:1px solid #292c2e;
}

.th-checks div{
    display:flex;
    align-items:center;
    gap:17px;
    min-height:68px;
    border-bottom:1px solid #292c2e;
    color:#b7b9bb;
    font-size:13px;
}

.th-checks i{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    color:#e3b35e;
    border:1px solid rgba(227,179,94,.45);
    font-style:normal;
    font-size:11px;
}

/* FINAL */
.th-final{
    position:relative;
    min-height:600px;
    display:flex;
    align-items:center;
    text-align:center;
    overflow:hidden;
    background:#060708;
}

.th-final-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center,rgba(190,35,27,.14),transparent 34%),
        linear-gradient(rgba(4,5,6,.55),rgba(4,5,6,.9)),
        url('../img/level15-bg.png') center/cover no-repeat;
    opacity:.75;
}

.th-final-content{
    position:relative;
}

.th-final h2{margin-top:13px}
.th-final p{
    margin:27px auto 0;
    color:#9c9fa1;
    line-height:1.8;
}

.th-final .th-actions{justify-content:center}

/* RESPONSIVE */
@media(max-width:1050px){
    .th-hero-emblem{width:300px;height:300px;flex-basis:300px}
    .th-emblem-core{width:145px;height:145px}
    .th-emblem-core span{font-size:51px}
    .th-intro-grid,.th-equipment-grid{gap:45px}
    .th-boss-grid{grid-template-columns:1fr 410px;gap:45px}
}

@media(max-width:800px){
    .th-main .container{width:min(100% - 26px,1320px)}
    .th-hero{min-height:720px}
    .th-hero-inner{padding:80px 0 105px}
    .th-hero-emblem{display:none}
    .th-hero h1{font-size:clamp(67px,18vw,105px)}
    .th-stats-grid{grid-template-columns:1fr 1fr}
    .th-stat:nth-child(2){border-right:0}
    .th-stat:nth-child(3){border-top:1px solid #202326}
    .th-stat:nth-child(4){border-top:1px solid #202326}
    .th-intro-grid,.th-equipment-grid,.th-boss-grid{grid-template-columns:1fr}
    .th-section-head{display:block}
    .th-section-head>p{margin-top:25px}
    .th-feature-grid{grid-template-columns:1fr}
    .th-feature-card{min-height:260px}
    .th-boss{min-height:auto;padding:90px 0}
    .th-boss-panel{margin-top:20px}
}

@media(max-width:520px){
    .th-main .container{width:calc(100% - 24px)}
    .th-hero-inner{padding:65px 0 100px}
    .th-status{font-size:9px;letter-spacing:1.3px}
    .th-version{gap:8px;font-size:8px;letter-spacing:1px}
    .th-hero h1{letter-spacing:-3px}
    .th-lead{font-size:14px}
    .th-actions{align-items:stretch;flex-direction:column}
    .th-btn{width:100%}
    .th-open{justify-content:space-between}
    .th-stat{min-height:100px;padding:18px 13px;gap:11px}
    .th-stat-number{font-size:29px}
    .th-stat strong{font-size:9px}
    .th-section{padding:75px 0}
    .th-intro h2,.th-section-head h2,.th-boss-copy h2,.th-equipment h2,.th-final h2{font-size:39px}
    .th-feature-card{padding:25px}
    .th-boss-panel{padding:18px}
    .th-final{min-height:560px}
}