:root{--bg:#08070a;--panel:#0d1118;--panel2:#101722;--line:#3a2020;--orange:#ff6a16;--orange2:#ff9c2d;--red:#ee2b1f;--gold:#ffbd3f;--text:#f6f7fb;--muted:#9ea6b4;--shadow:0 20px 60px rgba(0,0,0,.48)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08070a;color:var(--text);font-family:'Be Vietnam Pro',system-ui,sans-serif;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(1320px,calc(100% - 34px));margin:auto}.site-bg{position:fixed;inset:0;z-index:-4;background-image:linear-gradient(rgba(7,7,10,.28),rgba(5,4,6,.76)),url('../img/bg-scene.jpg');background-size:cover;background-position:center top;background-attachment:fixed}.site-vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 50% 20%,transparent 0 32%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.66) 100%),linear-gradient(180deg,transparent 40%,#09070a 85%)}.leaf-layer{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.22;background:radial-gradient(circle at 7% 20%,#ff4c1f 0 2px,transparent 3px),radial-gradient(circle at 93% 15%,#ff6a1d 0 2px,transparent 3px);background-size:90px 110px,130px 170px}
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(8,8,12,.97),rgba(8,9,14,.89));border-bottom:1px solid rgba(255,92,37,.24);backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(0,0,0,.28)}.nav-shell{height:76px;display:flex;align-items:center;gap:26px}.logo-slot{width:190px;height:64px;position:relative;display:grid;place-content:center;text-align:center;flex:0 0 auto}.logo-brush{position:absolute;inset:8px 5px;background:#f0e0dc;clip-path:polygon(4% 23%,12% 12%,38% 14%,49% 2%,67% 15%,92% 10%,98% 34%,92% 51%,100% 70%,85% 82%,52% 79%,39% 94%,21% 81%,4% 86%,10% 61%,0 45%);opacity:.92}.logo-slot strong,.logo-slot small{position:relative;color:#201315;z-index:1}.logo-slot strong{font-size:25px;line-height:1}.logo-slot small{font-size:8px;font-weight:900;margin-top:4px}.nav{display:flex;align-items:stretch;height:100%;gap:2px;flex:1}.nav-link{display:flex;align-items:center;gap:7px;padding:0 13px;font-size:12px;font-weight:700;color:#c5c8d0;position:relative}.nav-link:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:linear-gradient(90deg,var(--orange),var(--red));transform:scaleX(0);transition:.25s}.nav-link:hover,.nav-link.active{color:white;background:linear-gradient(180deg,rgba(255,78,30,.16),transparent)}.nav-link.active:after{transform:scaleX(1)}.nav-link i{color:#aeb4c0}.head-actions{display:flex;gap:9px}.social-btn,.login-btn{height:42px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;font-size:11px;font-weight:800;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 22px rgba(0,0,0,.25);transition:.2s}.social-btn:hover,.login-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.facebook{background:linear-gradient(135deg,#1686ff,#0858bc);box-shadow:0 0 20px rgba(25,122,255,.24)}.zalo{background:linear-gradient(135deg,#18c979,#078c52);box-shadow:0 0 20px rgba(18,207,117,.22)}.zalo-mark{width:22px;height:22px;border-radius:50%;background:white;color:#0c9a58;display:grid;place-items:center;font-size:10px;font-weight:900}.login-btn{background:linear-gradient(135deg,#5c3912,#1d160d);border-color:#c6812c;color:#ffc453}.menu-btn{display:none;background:none;border:0;color:white;font-size:22px}.view{display:none;min-height:calc(100vh - 76px);animation:fade .25s ease}.view.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-wrap{position:relative;border-bottom:1px solid rgba(255,95,30,.36);overflow:hidden}.hero-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,9,.62) 0%,rgba(10,7,9,.22) 42%,rgba(10,7,9,.08) 66%,rgba(8,8,12,.35) 100%)}.hero-grid{position:relative;min-height:430px;display:grid;grid-template-columns:1fr 390px;gap:40px;align-items:center}.hero-copy{padding-left:26px}.hero-mini{display:inline-block;color:#ff811f;font-weight:900;font-style:italic;letter-spacing:2px;font-size:25px;transform:rotate(-4deg)}.hero-copy h1{margin:4px 0 10px;line-height:.82;text-transform:uppercase;font-weight:900;letter-spacing:-5px;text-shadow:0 10px 28px #000}.hero-copy h1 span{display:block;font-size:clamp(62px,7vw,104px);background:linear-gradient(180deg,#ffdd68 0,#ff8c21 45%,#fa401f 100%);-webkit-background-clip:text;color:transparent;transform:rotate(-3deg);transform-origin:left center}.hero-copy h1 b{display:block;font-size:clamp(70px,7.5vw,112px);color:#f13a27;transform:rotate(-4deg);transform-origin:left center}.hero-slogan{font-size:21px;line-height:1.4;font-style:italic;margin:12px 0 6px;text-shadow:0 4px 14px #000}.hero-line{width:330px;height:5px;background:linear-gradient(90deg,#e62d1c,transparent);transform:skew(-25deg);margin-top:8px}.register-panel{background:linear-gradient(160deg,rgba(9,12,18,.96),rgba(13,8,10,.94));border:1px solid rgba(240,66,32,.6);border-radius:10px;padding:14px;box-shadow:0 0 0 2px rgba(109,21,16,.38),0 20px 50px rgba(0,0,0,.44),0 0 30px rgba(239,51,29,.11);position:relative}.register-panel:after{content:"";position:absolute;inset:auto 15px -2px;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent)}.register-tabs{height:52px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #48221e;border-radius:8px 8px 0 0;margin-bottom:14px;overflow:hidden}.register-tabs>*{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}.register-tabs .active{background:linear-gradient(135deg,#53140f,#1a1012);color:#fff;border-right:1px solid #d02c20}.register-tabs a{color:#9ea3ad}.input-wrap{position:relative;margin-bottom:10px}.input-wrap>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8d949e;font-size:15px}.input-wrap input{width:100%;height:46px;border-radius:7px;border:1px solid #303743;background:#0a0d12;color:white;padding:0 42px;font-size:12px;outline:none;transition:.2s}.input-wrap input:focus{border-color:#eb512b;box-shadow:0 0 0 3px rgba(235,81,43,.12)}.password-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#828a96;cursor:pointer}.register-submit{width:100%;height:48px;border-radius:7px;border:1px solid #ff7b31;background:linear-gradient(135deg,#ff4e1b,#e3211b);box-shadow:0 0 22px rgba(247,51,29,.27);color:white;font-weight:900;cursor:pointer;transition:.2s}.register-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}.register-submit:disabled{opacity:.6}.form-note{margin:10px 0 0;text-align:center;color:#858c99;font-size:10px}.form-note.success{color:#52d98c}.form-note.error{color:#ff7264}
.download-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:-20px;position:relative;z-index:3}.platform-button{height:76px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#0a0d12;display:flex;align-items:center;padding:0 22px;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.38);transition:.22s}.platform-button:hover{transform:translateY(-4px)}.platform-button>i:first-child{font-size:35px}.platform-button span{display:flex;flex-direction:column}.platform-button small{font-size:9px}.platform-button b{font-size:21px}.platform-button .arrow{margin-left:auto;font-size:20px}.platform-button.windows{border-color:#f23b25;box-shadow:0 0 22px rgba(239,55,35,.18)}.platform-button.windows>i{color:#f33b2a}.platform-button.apple{border-color:#a2b4d4}.platform-button.apple>i{color:white}.platform-button.android{border-color:#35c85e;box-shadow:0 0 22px rgba(48,211,95,.14)}.platform-button.android>i{color:#5ee779}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);margin:18px auto 16px;padding:15px 0;border-top:1px solid rgba(255,96,35,.14);border-bottom:1px solid rgba(255,96,35,.14);background:rgba(7,9,13,.52)}.feature-row>div{display:flex;align-items:center;justify-content:center;gap:13px;border-right:1px solid rgba(255,255,255,.07)}.feature-row>div:last-child{border-right:0}.feature-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid #f57623;color:#ff8b2b;font-size:17px}.feature-row p{margin:0;display:flex;flex-direction:column}.feature-row b{font-size:12px}.feature-row small{font-size:10px;color:#9ca3af;margin-top:4px}
.main-columns{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding-bottom:34px}.news-box,.community-banner,.quote-card,.standalone-panel,.support-card{background:linear-gradient(160deg,rgba(10,14,20,.96),rgba(8,10,14,.92));border:1px solid rgba(206,59,32,.38);box-shadow:var(--shadow)}.news-box{border-radius:9px;padding:14px}.section-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 11px;border-bottom:1px solid rgba(255,255,255,.07)}.section-head>div{display:flex;align-items:center;gap:10px}.section-head h2{font-size:17px;margin:0}.section-head>a{font-size:10px;color:#ffc075}.leaf-logo{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#ffb532;background:radial-gradient(circle,#ff321e 0 18%,transparent 20%),#20110c;border:1px solid #f55c22}.news-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.news-card{border:1px solid #343640;border-radius:7px;background:#0b1017;overflow:hidden;min-width:0}


.post-tag{position:absolute;top:8px;left:8px;z-index:2;background:#ffbd3f;color:#3a1606;padding:4px 7px;border-radius:4px;font-size:8px;font-weight:900}.post-body{padding:11px}.post-meta{display:flex;gap:11px;color:#7f8793;font-size:8px}.post-body h3{font-size:13px;margin:8px 0 6px;line-height:1.45}.post-description{font-size:10.5px;line-height:1.65;color:#c0c4cc;white-space:normal}.post-description.preview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.read-post{margin-top:10px;border:0;background:none;color:#ff9a48;padding:0;font-size:9px;font-weight:800;cursor:pointer}.sidebar-stack{display:flex;flex-direction:column;gap:11px}.community-banner{min-height:116px;border-radius:7px;padding:18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(81,24,9,.9),rgba(13,16,22,.95));overflow:hidden}.community-banner small,.community-banner b,.community-banner span{display:block}.community-banner small{font-size:13px;font-weight:900}.community-banner b{font-size:25px;color:#ffb02e;line-height:1}.community-banner span{font-size:8px;margin-top:8px}.community-banner>i{font-size:62px;color:rgba(255,144,43,.45)}.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quote-card{border-radius:7px;min-height:136px;padding:22px;text-align:center;display:grid;place-items:center;background:linear-gradient(180deg,rgba(60,13,11,.82),rgba(17,9,10,.95))}.quote-card>i{color:#f05631}.quote-card p{font-size:12px;font-style:italic;line-height:1.7;margin:8px 0}.quote-card span{font-size:9px;color:#aaa}
.page-shell{padding:64px 0 80px}.page-shell.compact{max-width:760px}.page-title{max-width:760px;margin-bottom:28px}.page-title>span{font-size:11px;color:#ff9c3a;font-weight:900;letter-spacing:2px}.page-title h2{font-size:clamp(35px,5vw,58px);margin:6px 0 10px;letter-spacing:-2px}.page-title p{color:#b1b7c1;line-height:1.75;font-size:13px}.page-title code{color:#ffb053}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-grid article{min-height:230px;padding:28px;background:rgba(10,14,20,.9);border:1px solid rgba(255,83,37,.3);border-radius:12px}.info-grid i{font-size:34px;color:#ff8d2c}.info-grid h3{margin:18px 0 8px}.info-grid p{color:#aeb5c0;font-size:12px;line-height:1.75}.posts-list{display:grid;gap:13px}.post-row{display:grid;grid-template-columns:220px 1fr;background:rgba(8,12,18,.94);border:1px solid rgba(255,84,38,.25);border-radius:10px;overflow:hidden}.post-row .post-row .post-body{padding:18px}.post-row .post-body h3{font-size:20px}.post-row .post-description{font-size:12px;max-height:130px;overflow:hidden;position:relative}.post-row .post-description:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,#0b1017)}.download-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.download-big{min-height:300px;border-radius:14px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(255,80,30,.08),rgba(8,12,18,.96));border:1px solid rgba(255,255,255,.18);transition:.2s}.download-big:hover{transform:translateY(-4px)}.download-big>i{font-size:48px;margin-bottom:auto}.download-big small{font-size:9px;color:#a8afba}.download-big h3{font-size:26px;margin:6px 0}.download-big p{font-size:11px;color:#aeb4bf}.download-big b{margin-top:10px;color:#ffac4c;font-size:11px}.download-big.windows{border-color:#ed4930}.download-big.android{border-color:#38c95d}.standalone-panel{padding:24px;border-radius:12px}.community-page{display:grid;grid-template-columns:1fr 1fr;gap:16px}.community-page>a{min-height:230px;border-radius:14px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}.community-page>a>i,.community-page>a>.zalo-mark{font-size:38px;margin-bottom:auto}.community-page b{font-size:26px}.community-page span{font-size:11px;margin-top:6px}.support-card{border-radius:12px;padding:32px;text-align:center}.support-card i{font-size:44px;color:#ff9135}.support-card p{color:#abb2bd;font-size:12px;line-height:1.7}

.post-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    padding: 20px;
}

.post-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 3, 6, .78);
    backdrop-filter: blur(8px);
}

/* Khung bài viết */
.modal-card {
    position: relative;
    z-index: 2;

    width: min(780px, calc(100% - 30px));
    max-height: 86vh;

    /* QUAN TRỌNG */
    overflow: hidden;

    margin: 0;

    display: flex;
    flex-direction: column;

    background: linear-gradient(160deg, #10151e, #0b0d12);
    border: 1px solid rgba(255, 87, 39, .45);
    border-radius: 16px;

    padding: 0;

    box-shadow: 0 30px 100px #000;
}
/* =========================
   CARD BÀI VIẾT
========================= */

.news-card,
.post-row {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(19, 23, 31, .96),
            rgba(10, 13, 18, .97)
        );

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.news-card::before,
.post-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #ff5a1f,
            #ff9c33,
            transparent 75%
        );
}

.news-card:hover,
.post-row:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 119, 50, .28);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .34),
        0 0 24px rgba(255, 88, 32, .06);
}

/* =========================
   NỘI DUNG CARD
========================= */

.post-body {
    position: relative;
    z-index: 2;

    padding: 20px;
}

/* =========================
   TOP: TAG + NGÀY
========================= */

.post-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}

.post-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 87, 31, .16),
            rgba(255, 149, 47, .08)
        );

    border: 1px solid rgba(255, 116, 48, .22);

    color: #ffac76;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .3px;
}

.post-tag i {
    font-size: 10px;
}

.post-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #7e8794;

    font-size: 10px;
    white-space: nowrap;
}

/* =========================
   TIÊU ĐỀ
========================= */

.post-title,
.post-body h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;

    letter-spacing: -.2px;
}

/* =========================
   MÔ TẢ
========================= */

.post-description {
    color: #aeb5c0;

    font-size: 13px;
    line-height: 1.7;

    margin: 0;
}

.post-description.preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;

    min-height: 66px;
}

/* =========================
   FOOTER CARD
========================= */

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 16px;
    padding-top: 13px;

    border-top: 1px solid rgba(255,255,255,.055);
}

.post-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #7f8996;

    font-size: 10px;
}

.post-author i {
    color: #ff8b4a;
}

/* =========================
   NÚT ĐỌC BÀI
========================= */

.read-post {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 34px;

    padding: 7px 12px;

    border: 1px solid rgba(255, 115, 45, .2);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 87, 31, .12),
            rgba(255, 142, 49, .07)
        );

    color: #ff9f67;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.read-post i {
    font-size: 9px;

    transition:
        transform .18s ease;
}

.read-post:hover {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff5a1f,
            #e84318
        );

    border-color: #ff6d32;

    transform: translateY(-1px);
}

.read-post:hover i {
    transform: translateX(2px);
}
/* Nút X luôn cố định */
.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);

    background: rgba(18, 23, 32, .96);
    color: white;

    font-size: 18px;
    cursor: pointer;

    z-index: 20;
}

.modal-close:hover {
    background: #ff5727;
    border-color: #ff5727;
}

/* Thông tin người đăng */
.modal-meta {
    flex-shrink: 0;
    display: flex;
    gap: 16px;

    padding: 22px 70px 5px 24px;

    color: #8f97a4;
    font-size: 10px;
}

/* Tiêu đề */
.modal-card h2 {
    flex-shrink: 0;

    font-size: 28px;
    line-height: 1.3;

    margin: 8px 70px 15px 24px;

    color: #fff;
}

/* Chỉ nội dung bài viết được cuộn */
.modal-content {
    overflow-y: auto;
    flex: 1;

    padding: 0 24px 28px;

    font-size: 13px;
    line-height: 1.9;
    color: #d5d8de;

    white-space: pre-wrap;
    word-break: break-word;

    overscroll-behavior: contain;
}

/* Thanh cuộn */
.modal-content::-webkit-scrollbar {
    width: 7px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 106, 36, .55);
    border-radius: 20px;
}

.modal-open {
    overflow: hidden;
}
footer{background:rgba(7,7,9,.94);border-top:1px solid rgba(255,71,34,.27)}.footer-wrap{min-height:120px;display:flex;align-items:center;gap:30px}.footer-logo{transform:scale(.84);transform-origin:left center}.footer-copy{flex:1}.footer-copy p{font-size:11px;margin:0 0 5px}.footer-copy span{font-size:9px;color:#9299a3}.footer-links{display:flex;gap:18px;font-size:10px;color:#b0b5bd}
@media(max-width:1120px){.nav-link{padding:0 8px;font-size:10px}.head-actions .social-btn span:not(.zalo-mark){display:none}.hero-grid{grid-template-columns:1fr 350px}.main-columns{grid-template-columns:1fr}.sidebar-stack{display:grid;grid-template-columns:1fr 1fr}.quote-card{grid-column:1/-1}}
@media(max-width:900px){.nav{position:absolute;left:17px;right:17px;top:76px;height:auto;display:none;flex-direction:column;background:#090c12;border:1px solid #323743;border-radius:10px;padding:8px}.nav.open{display:flex}.nav-link{min-height:46px}.menu-btn{display:block;margin-left:auto}.head-actions{display:none}.hero-grid{grid-template-columns:1fr;gap:14px;padding:35px 0}.register-panel{max-width:520px}.download-strip{grid-template-columns:1fr;margin-top:14px}.feature-row{grid-template-columns:1fr 1fr}.news-cards,.download-page-grid,.info-grid{grid-template-columns:1fr 1fr}.post-row{grid-template-columns:180px 1fr}.footer-links{display:none}}
@media(max-width:620px){.logo-slot{width:150px}.hero-copy{padding-left:4px}.hero-copy h1 span{font-size:56px}.hero-copy h1 b{font-size:64px}.hero-slogan{font-size:17px}.feature-row,.news-cards,.download-page-grid,.info-grid,.community-page,.sidebar-stack{grid-template-columns:1fr}.feature-row>div{justify-content:flex-start;padding:9px 20px;border-right:0}.post-row{grid-template-columns:1fr}.post-row .page-shell{padding-top:40px}.footer-wrap{flex-direction:column;align-items:flex-start;padding:20px 0}.footer-logo{margin-left:-10px}}

/* ===== MOBILE FIRST REDESIGN V4 ===== */
.mobile-dock{display:none}
@media(max-width:900px){
  html{scroll-padding-top:64px}
  body{padding-bottom:76px;background:#07080b}
  .container{width:min(100% - 24px,760px)}
  .site-bg{background-attachment:scroll;background-position:58% top;filter:saturate(.9) contrast(1.03)}
  .site-vignette{background:linear-gradient(180deg,rgba(5,6,9,.08) 0,rgba(5,6,9,.18) 25%,rgba(5,6,9,.82) 64%,#07080b 100%)}
  .leaf-layer{opacity:.12}

  .topbar{height:62px;border-bottom-color:rgba(255,105,42,.22);box-shadow:0 8px 24px rgba(0,0,0,.38)}
  .nav-shell{height:62px;gap:10px}
  .logo-slot{width:132px;height:50px;margin-left:-5px}
  .logo-slot strong{font-size:20px}.logo-slot small{font-size:6px}
  .logo-brush{inset:5px 2px}
  .menu-btn{display:grid;place-items:center;width:42px;height:42px;margin-left:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#151922,#0b0e14);font-size:18px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
  .menu-btn:active{transform:scale(.96)}
  .head-actions{display:none}
  .nav{position:fixed;left:12px;right:12px;top:72px;display:none;height:auto;max-height:calc(100vh - 160px);overflow:auto;flex-direction:column;gap:6px;padding:10px;background:rgba(9,12,18,.97);border:1px solid rgba(255,104,42,.24);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(20px)}
  .nav.open{display:flex;animation:mobileMenuIn .2s ease}
  @keyframes mobileMenuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
  .nav-link{min-height:50px;padding:0 14px;border-radius:12px;font-size:12px;background:#0d1118;color:#cfd3da}
  .nav-link:after{display:none}
  .nav-link.active{background:linear-gradient(135deg,rgba(255,78,30,.24),rgba(255,157,45,.08));color:#fff;border:1px solid rgba(255,102,39,.22)}
  .nav-link i{width:22px;text-align:center;color:#ff8b38}

  .view{min-height:calc(100vh - 138px)}
  .hero-wrap{border-bottom:0;overflow:visible}
  .hero-wrap:before{background:linear-gradient(180deg,rgba(7,8,11,.1),rgba(7,8,11,.24) 48%,#080a0f 92%)}
  .hero-grid{min-height:auto;display:flex;flex-direction:column;gap:16px;padding:34px 0 12px;align-items:stretch}
  .hero-copy{padding:0 2px;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-mini{font-size:18px;letter-spacing:1.4px;text-shadow:0 3px 12px #000}
  .hero-copy h1{letter-spacing:-3px;margin:3px 0 8px;text-shadow:0 8px 22px rgba(0,0,0,.8)}
  .hero-copy h1 span{font-size:clamp(48px,14vw,72px)}
  .hero-copy h1 b{font-size:clamp(56px,16vw,82px)}
  .hero-slogan{font-size:15px;line-height:1.35;margin:8px 0 4px;max-width:260px}
  .hero-line{width:210px;height:3px}

  .register-panel{order:2;width:100%;max-width:none;padding:12px;border-radius:16px;background:linear-gradient(160deg,rgba(12,16,23,.98),rgba(12,9,12,.98));box-shadow:0 18px 45px rgba(0,0,0,.42),0 0 0 1px rgba(255,105,42,.08)}
  .register-tabs{height:46px;border-radius:11px;margin-bottom:12px}.register-tabs>*{font-size:11px}
  .input-wrap{margin-bottom:9px}.input-wrap input{height:50px;border-radius:12px;font-size:13px;padding-left:44px;background:#0b0f15}.input-wrap>i{left:16px}.password-eye{right:10px;width:36px;height:36px}
  .register-submit{height:52px;border-radius:12px;font-size:12px}.form-note{font-size:10px;line-height:1.5}

  .download-strip{order:3;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:0;padding-top:4px}
  .platform-button{height:74px;padding:9px 8px;gap:5px;border-radius:14px;flex-direction:column;justify-content:center;text-align:center}
  .platform-button>i:first-child{font-size:25px}.platform-button span{align-items:center}.platform-button small{font-size:7px}.platform-button b{font-size:14px}.platform-button .arrow{display:none}

  .feature-row{grid-template-columns:1fr 1fr;gap:8px;margin:12px auto;padding:0;border:0;background:transparent}
  .feature-row>div{justify-content:flex-start;min-height:74px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(10,14,20,.82);gap:9px}
  .feature-icon{width:38px;height:38px;min-width:38px;font-size:14px}
  .feature-row b{font-size:10px;line-height:1.3}.feature-row small{font-size:8px;margin-top:2px}

  .main-columns{display:block;padding-bottom:22px}
  .news-box{padding:10px;border-radius:16px;background:rgba(8,11,16,.94)}
  .section-head{padding:2px 2px 10px}.section-head h2{font-size:14px}.section-head>a{font-size:9px}.leaf-logo{width:31px;height:31px}
  .news-cards{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .news-card{display:grid;grid-template-columns:112px 1fr;border-radius:13px;overflow:hidden;background:#0c1118}
  .news-card .news-card .news-card .post-tag{font-size:7px;top:7px;left:7px;padding:3px 5px}
  .news-card .post-body{padding:10px}.news-card .post-meta{gap:7px;font-size:7px;flex-wrap:wrap}.news-card .post-body h3{font-size:12px;margin:6px 0 5px}.news-card .post-description{font-size:9px;line-height:1.55}.news-card .post-description.preview{-webkit-line-clamp:3}.read-post{font-size:8px;margin-top:7px}
  .sidebar-stack{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
  .community-banner{min-height:104px;border-radius:16px;padding:16px}.community-banner small{font-size:10px}.community-banner b{font-size:22px}.community-banner span{font-size:7px}.community-banner>i{font-size:48px}
  .social-grid{grid-template-columns:1fr 1fr}.social-grid .social-btn{height:48px;border-radius:12px;font-size:10px}
  .quote-card{min-height:112px;border-radius:16px;padding:17px}.quote-card p{font-size:10px;line-height:1.6}

  .page-shell{padding:32px 0 38px}.page-shell.compact{max-width:none}
  .page-title{margin-bottom:18px}.page-title>span{font-size:9px}.page-title h2{font-size:32px;line-height:1.07;letter-spacing:-1.3px}.page-title p{font-size:11px;line-height:1.65;margin-bottom:0}
  .info-grid,.download-page-grid,.community-page{grid-template-columns:1fr;gap:10px}
  .info-grid article{min-height:0;padding:18px;border-radius:14px;display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center}.info-grid i{grid-row:1/3;font-size:27px}.info-grid h3{margin:0 0 5px;font-size:15px}.info-grid p{margin:0;font-size:10px;line-height:1.55}
  .posts-list{gap:10px}.post-row{grid-template-columns:1fr;border-radius:15px}.post-row .post-row .post-body{padding:14px}.post-row .post-body h3{font-size:17px}.post-row .post-description{font-size:10.5px;line-height:1.7;max-height:112px}.post-row .post-meta{font-size:8px;flex-wrap:wrap}
  .download-big{min-height:176px;padding:19px;border-radius:16px;display:grid;grid-template-columns:54px 1fr auto;grid-template-rows:auto auto auto;column-gap:14px;align-items:center;justify-content:initial}
  .download-big>i{grid-row:1/4;font-size:38px;margin:0}.download-big small{font-size:8px}.download-big h3{font-size:19px;margin:2px 0}.download-big p{font-size:9px;margin:0}.download-big b{grid-column:3;grid-row:1/4;margin:0;font-size:9px;text-align:right}
  .standalone-panel{padding:14px;border-radius:16px}.standalone-panel .input-wrap input{height:52px}
  .community-page>a{min-height:150px;padding:20px;border-radius:16px}.community-page>a>i,.community-page>a>.zalo-mark{font-size:30px}.community-page b{font-size:21px}.community-page span{font-size:9px}
  .support-card{padding:22px 18px;border-radius:16px}.support-card i{font-size:34px}.support-card p{font-size:10.5px}

  .post-modal.show{display:flex;align-items:flex-end}.modal-backdrop{backdrop-filter:blur(5px)}
  .modal-card{width:100%;max-height:90vh;margin:0;border-radius:22px 22px 0 0;padding:24px 17px 28px;border-left:0;border-right:0;border-bottom:0;animation:sheetUp .25s ease}
  @keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .modal-close{right:12px;top:12px;width:38px;height:38px}.modal-meta{font-size:8px;gap:10px;flex-wrap:wrap;padding-right:48px}.modal-card h2{font-size:22px;line-height:1.25;margin:12px 45px 16px 0}.modal-content{font-size:12px;line-height:1.85}
  .toast{top:calc(70px + env(safe-area-inset-top));bottom:auto;left:50%;right:auto;width:calc(100% - 24px);max-width:420px;text-align:center;border-radius:13px;font-size:12px;line-height:1.45;padding:11px 14px;transform:translate(-50%,-12px);pointer-events:none;touch-action:none}.toast.show{transform:translate(-50%,0)}

  footer{margin-bottom:0}.footer-wrap{min-height:0;display:grid;grid-template-columns:1fr;padding:22px 0 20px;gap:10px}.footer-logo{display:none}.footer-copy{text-align:center}.footer-copy p{font-size:9px}.footer-copy span{font-size:8px}.footer-links{display:none}

  .mobile-dock{position:fixed;left:0;right:0;bottom:0;z-index:80;height:68px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));background:rgba(8,10,14,.96);border-top:1px solid rgba(255,107,42,.18);box-shadow:0 -10px 32px rgba(0,0,0,.42);backdrop-filter:blur(18px)}
  .dock-link{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#7f8793;font-size:8px;font-weight:700;position:relative;border-radius:12px}
  .dock-link i{font-size:16px}.dock-link.active{color:#ff9950;background:linear-gradient(180deg,rgba(255,106,40,.12),transparent)}
  .dock-main{margin-top:-18px;height:58px;width:58px;justify-self:center;border-radius:18px;background:linear-gradient(135deg,#ff5d24,#d91d19);color:white!important;border:2px solid #ff9d56;box-shadow:0 8px 22px rgba(235,55,28,.38)}
  .dock-main i{font-size:19px}.dock-main span{font-size:7px}
}

@media(max-width:420px){
  .container{width:calc(100% - 20px)}
  .hero-copy{min-height:225px}.hero-copy h1 span{font-size:48px}.hero-copy h1 b{font-size:58px}
  .download-strip{gap:6px}.platform-button{height:68px}.platform-button>i:first-child{font-size:22px}.platform-button b{font-size:12px}
  .feature-row{gap:6px}.feature-row>div{padding:8px;min-height:68px}.feature-icon{width:34px;height:34px;min-width:34px}
  .news-card{grid-template-columns:98px 1fr}.news-card .news-card .post-body{padding:9px}
  .social-grid{grid-template-columns:1fr}.download-big{grid-template-columns:46px 1fr auto;padding:16px;column-gap:10px}.download-big>i{font-size:31px}.download-big h3{font-size:17px}
}
@media (max-width: 900px) {

    .post-modal {
        padding: 12px;
    }

    .post-modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-card {
        width: 100%;

        /* Không tràn khỏi màn hình */
        max-height: calc(100dvh - 24px);

        margin: 0;

        /* Bo cả 4 góc */
        border-radius: 20px;

        border: 1px solid rgba(255, 87, 39, .45);

        overflow: hidden;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    /* X luôn cố định */
    .modal-close {
        position: absolute;
        top: 10px;
        right: 10px;

        width: 44px;
        height: 44px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        z-index: 30;
    }

    .modal-meta {
        flex-shrink: 0;

        padding:
            18px
            65px
            4px
            17px;
    }

    .modal-card h2 {
        flex-shrink: 0;

        font-size: 20px;
        line-height: 1.3;

        margin:
            8px
            65px
            14px
            17px;
    }

    /* CHỈ nội dung này được cuộn */
    .modal-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;

        padding:
            0
            17px
            22px
            17px;

        font-size: 13px;
        line-height: 1.75;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}
/* ===== FIX MOBILE 08/09/2026 ===== */
@media (max-width: 900px){
  /* Tách NARUTO khỏi tiêu đề chính để không bị chồng/nấp trên màn hình nhỏ */
  .hero-mini{
    position:relative;
    z-index:3;
    display:block;
    width:max-content;
    margin:0 0 10px 2px;
    line-height:1.15;
    transform:none;
  }
  .hero-copy h1{
    position:relative;
    z-index:2;
    margin-top:0;
    padding-top:0;
    line-height:.9;
  }
  .hero-copy h1 span,
  .hero-copy h1 b{
    position:relative;
    z-index:1;
  }

  /* Toàn bộ ô điều hướng dưới đáy đều là vùng bấm */
  .mobile-dock{
    align-items:stretch;
  }
  .dock-link{
    width:100%;
    height:100%;
    min-height:56px;
    margin:0;
    padding:6px 2px;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(255,120,55,.16);
  }

  /* Nút tải game vẫn nổi ở giữa nhưng vùng bấm chiếm cả cột */
  .dock-main{
    width:100%;
    height:100%;
    min-height:56px;
    margin:0;
    border:0;
    border-radius:12px;
    background:transparent;
    box-shadow:none;
    position:relative;
    overflow:visible;
  }
  .dock-main::before{
    content:"";
    position:absolute;
    width:58px;
    height:58px;
    left:50%;
    top:-18px;
    transform:translateX(-50%);
    border-radius:18px;
    background:linear-gradient(135deg,#ff5d24,#d91d19);
    border:2px solid #ff9d56;
    box-shadow:0 8px 22px rgba(235,55,28,.38);
    z-index:0;
    pointer-events:none;
  }
  .dock-main i,
  .dock-main span{
    position:relative;
    z-index:1;
  }
  .dock-main i{margin-top:-40px}
}

@media (max-width:420px){
  .hero-mini{margin-bottom:9px;font-size:17px}
  .hero-copy h1{line-height:.92}
}

/* ===== FIX CLICK TOÀN BỘ THANH ĐIỀU HƯỚNG MOBILE ===== */
@media (max-width: 900px){
  .mobile-dock{
    align-items:stretch !important;
  }
  .mobile-dock .dock-link{
    position:relative;
    display:flex !important;
    width:100% !important;
    height:100% !important;
    min-width:0;
    min-height:56px;
    padding:6px 0 !important;
    margin:0 !important;
    align-self:stretch;
    justify-self:stretch;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
  }
  /* Icon/chữ chỉ để hiển thị; mọi thao tác chạm được giao cho thẻ <a> cha */
  .mobile-dock .dock-link > i,
  .mobile-dock .dock-link > span,
  .mobile-dock .dock-link::before,
  .mobile-dock .dock-link::after{
    pointer-events:none !important;
  }
}


/* ===== MOBILE DOCK HITBOX FIX V5 - vùng chạm phủ kín từng ô ===== */
@media (max-width:900px){
  .mobile-dock{
    height:72px !important;
    align-items:stretch !important;
    overflow:visible !important;
    isolation:isolate;
  }
  .mobile-dock .dock-link{
    position:relative !important;
    z-index:1;
    width:100% !important;
    height:100% !important;
    min-height:60px !important;
    padding:7px 2px calc(5px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:4px !important;
    overflow:visible !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(255,128,61,.22);
    cursor:pointer;
  }
  .mobile-dock .dock-hitbox{
    position:absolute !important;
    inset:0 !important;
    z-index:50 !important;
    display:block !important;
    pointer-events:auto !important;
    background:transparent !important;
    border-radius:inherit;
  }
  .mobile-dock .dock-link > i,
  .mobile-dock .dock-link > .dock-label{
    position:relative !important;
    z-index:2 !important;
    pointer-events:none !important;
  }
  .mobile-dock .dock-link::after{
    content:none !important;
  }
  .mobile-dock .dock-main::before{
    pointer-events:none !important;
    z-index:0 !important;
  }
  .mobile-dock .dock-main .dock-hitbox{
    top:-22px !important;
    bottom:-4px !important;
    left:0 !important;
    right:0 !important;
  }
}

/* ===== HIỆU ỨNG CHAKRA ÁNH SÁNG NHỎ - KHÔNG ẢNH HƯỞNG HEADER/CLICK ===== */
.ninja-fx{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  contain:layout paint;
}

/* Chỉ nâng phần nội dung lên trên hiệu ứng, KHÔNG đổi position của header. */
#app,
footer{
  position:relative;
  z-index:1;
}

/* Giữ nguyên cơ chế ghim header trên PC. */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}

.mobile-dock{z-index:110}
.post-modal{z-index:200}
.toast{z-index:220}

.ninja-orb{
  --orb-size:6px;
  --orb-x:0px;
  --orb-drift:18px;
  --orb-rise:120px;
  --orb-duration:10s;
  --orb-delay:0s;
  position:absolute;
  width:var(--orb-size);
  height:var(--orb-size);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,
    rgba(255,250,205,.98) 0 18%,
    rgba(255,190,85,.95) 20% 38%,
    rgba(255,101,37,.66) 45% 62%,
    rgba(255,68,24,0) 74%);
  box-shadow:
    0 0 7px rgba(255,207,104,.78),
    0 0 16px rgba(255,104,43,.46);
  filter:blur(.05px);
  will-change:transform,opacity;
  animation:chakraFloat var(--orb-duration) ease-in-out var(--orb-delay) infinite;
}

/* Phân bố nhiều hạt ở toàn màn hình, kích thước/tốc độ khác nhau */
.ninja-orb:nth-child(1){left:3%;top:82%;--orb-size:5px;--orb-duration:9s;--orb-delay:-2s;--orb-rise:150px;--orb-drift:22px}
.ninja-orb:nth-child(2){left:8%;top:57%;--orb-size:7px;--orb-duration:12s;--orb-delay:-8s;--orb-rise:125px;--orb-drift:-18px}
.ninja-orb:nth-child(3){left:13%;top:91%;--orb-size:4px;--orb-duration:10s;--orb-delay:-5s;--orb-rise:180px;--orb-drift:30px}
.ninja-orb:nth-child(4){left:18%;top:69%;--orb-size:6px;--orb-duration:14s;--orb-delay:-3s;--orb-rise:145px;--orb-drift:-24px}
.ninja-orb:nth-child(5){left:22%;top:44%;--orb-size:4px;--orb-duration:11s;--orb-delay:-9s;--orb-rise:105px;--orb-drift:16px}
.ninja-orb:nth-child(6){left:27%;top:87%;--orb-size:8px;--orb-duration:15s;--orb-delay:-11s;--orb-rise:190px;--orb-drift:-32px}
.ninja-orb:nth-child(7){left:31%;top:62%;--orb-size:5px;--orb-duration:9.5s;--orb-delay:-6s;--orb-rise:130px;--orb-drift:20px}
.ninja-orb:nth-child(8){left:35%;top:76%;--orb-size:3px;--orb-duration:8s;--orb-delay:-1s;--orb-rise:115px;--orb-drift:-14px}
.ninja-orb:nth-child(9){left:39%;top:52%;--orb-size:7px;--orb-duration:13s;--orb-delay:-10s;--orb-rise:155px;--orb-drift:28px}
.ninja-orb:nth-child(10){left:43%;top:94%;--orb-size:5px;--orb-duration:11.5s;--orb-delay:-4s;--orb-rise:205px;--orb-drift:-25px}
.ninja-orb:nth-child(11){left:47%;top:68%;--orb-size:4px;--orb-duration:10.5s;--orb-delay:-7s;--orb-rise:135px;--orb-drift:18px}
.ninja-orb:nth-child(12){left:51%;top:38%;--orb-size:6px;--orb-duration:16s;--orb-delay:-13s;--orb-rise:110px;--orb-drift:-20px}
.ninja-orb:nth-child(13){left:55%;top:84%;--orb-size:8px;--orb-duration:14.5s;--orb-delay:-5s;--orb-rise:185px;--orb-drift:34px}
.ninja-orb:nth-child(14){left:59%;top:59%;--orb-size:4px;--orb-duration:9s;--orb-delay:-3s;--orb-rise:120px;--orb-drift:-16px}
.ninja-orb:nth-child(15){left:63%;top:72%;--orb-size:6px;--orb-duration:12.5s;--orb-delay:-9s;--orb-rise:150px;--orb-drift:24px}
.ninja-orb:nth-child(16){left:67%;top:47%;--orb-size:3px;--orb-duration:8.5s;--orb-delay:-6s;--orb-rise:100px;--orb-drift:-12px}
.ninja-orb:nth-child(17){left:71%;top:90%;--orb-size:7px;--orb-duration:15.5s;--orb-delay:-12s;--orb-rise:200px;--orb-drift:30px}
.ninja-orb:nth-child(18){left:75%;top:65%;--orb-size:5px;--orb-duration:11s;--orb-delay:-8s;--orb-rise:138px;--orb-drift:-22px}
.ninja-orb:nth-child(19){left:79%;top:79%;--orb-size:4px;--orb-duration:10s;--orb-delay:-2s;--orb-rise:165px;--orb-drift:16px}
.ninja-orb:nth-child(20){left:83%;top:42%;--orb-size:7px;--orb-duration:14s;--orb-delay:-10s;--orb-rise:115px;--orb-drift:-28px}
.ninja-orb:nth-child(21){left:87%;top:88%;--orb-size:5px;--orb-duration:12s;--orb-delay:-4s;--orb-rise:190px;--orb-drift:24px}
.ninja-orb:nth-child(22){left:91%;top:61%;--orb-size:3px;--orb-duration:8.8s;--orb-delay:-7s;--orb-rise:125px;--orb-drift:-15px}
.ninja-orb:nth-child(23){left:95%;top:75%;--orb-size:6px;--orb-duration:13.5s;--orb-delay:-11s;--orb-rise:160px;--orb-drift:18px}
.ninja-orb:nth-child(24){left:11%;top:35%;--orb-size:4px;--orb-duration:10.8s;--orb-delay:-3s;--orb-rise:95px;--orb-drift:14px}
.ninja-orb:nth-child(25){left:29%;top:31%;--orb-size:5px;--orb-duration:12.8s;--orb-delay:-9s;--orb-rise:100px;--orb-drift:-19px}
.ninja-orb:nth-child(26){left:58%;top:27%;--orb-size:4px;--orb-duration:9.8s;--orb-delay:-6s;--orb-rise:90px;--orb-drift:16px}
.ninja-orb:nth-child(27){left:73%;top:24%;--orb-size:6px;--orb-duration:14.8s;--orb-delay:-12s;--orb-rise:100px;--orb-drift:-24px}
.ninja-orb:nth-child(28){left:89%;top:32%;--orb-size:4px;--orb-duration:11.8s;--orb-delay:-5s;--orb-rise:105px;--orb-drift:20px}

@keyframes chakraFloat{
  0%{
    transform:translate3d(0,18px,0) scale(.55);
    opacity:0;
  }
  12%{opacity:.34}
  42%{
    transform:translate3d(calc(var(--orb-drift) * .55),calc(var(--orb-rise) * -.5),0) scale(1.05);
    opacity:.72;
  }
  72%{opacity:.38}
  100%{
    transform:translate3d(var(--orb-drift),calc(var(--orb-rise) * -1),0) scale(.68);
    opacity:0;
  }
}

/* Trên điện thoại vẫn có nhiều chakra nhưng nhẹ hơn để tránh giật. */
@media (max-width:900px){
  .ninja-orb{opacity:0;box-shadow:0 0 6px rgba(255,207,104,.65),0 0 12px rgba(255,104,43,.34)}
  .ninja-orb:nth-child(4n){display:none}
}

@media (prefers-reduced-motion:reduce){
  .ninja-orb{animation:none!important;display:none!important}
}

/* ===== TRANG TẢI GAME - REDESIGN PC + MOBILE ===== */
.download-page-shell{padding-top:42px;padding-bottom:88px}
.download-hero{position:relative;min-height:250px;display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:center;gap:28px;padding:36px 40px;margin-bottom:20px;overflow:hidden;border:1px solid rgba(255,104,39,.34);border-radius:22px;background:linear-gradient(120deg,rgba(12,16,23,.97),rgba(16,10,12,.94) 62%,rgba(64,19,10,.82));box-shadow:0 22px 70px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.03)}
.download-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 45%,rgba(255,98,25,.2),transparent 25%),linear-gradient(90deg,transparent,rgba(255,73,28,.04),transparent)}
.download-hero:after{content:"";position:absolute;left:40px;right:40px;bottom:0;height:2px;background:linear-gradient(90deg,#ff5e24,#ffb342 45%,transparent)}
.download-hero-copy{position:relative;z-index:2;max-width:790px}
.download-kicker{display:inline-flex;align-items:center;gap:8px;color:#ffad50;font-size:10px;font-weight:900;letter-spacing:1.7px}
.download-kicker i{font-size:13px}
.download-hero h2{margin:10px 0 12px;font-size:clamp(34px,4.2vw,58px);line-height:1.05;letter-spacing:-2px}
.download-hero h2 b{font-weight:900;background:linear-gradient(90deg,#ffbc53,#ff6b2a 58%,#f23d25);-webkit-background-clip:text;color:transparent}
.download-hero-copy>p{max-width:720px;margin:0;color:#aeb6c2;font-size:12px;line-height:1.8}
.download-quick-info{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.download-quick-info span{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.035);color:#c8ced7;font-size:9px;font-weight:700}
.download-quick-info i{color:#ff9741}
.download-hero-mark{position:relative;width:190px;height:190px;margin:auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,106,39,.2),rgba(255,106,39,.045) 47%,transparent 70%)}
.download-hero-mark>i{position:relative;z-index:3;font-size:56px;color:#ffac51;text-shadow:0 0 28px rgba(255,104,31,.55)}
.chakra-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,137,59,.32);animation:downloadPulse 3.4s ease-in-out infinite}
.chakra-ring.ring-1{width:116px;height:116px}.chakra-ring.ring-2{width:164px;height:164px;animation-delay:-1.2s}
@keyframes downloadPulse{0%,100%{transform:scale(.94);opacity:.35}50%{transform:scale(1.06);opacity:.9}}

.download-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.download-big{position:relative;min-height:390px;padding:24px;border-radius:20px;display:flex;flex-direction:column;justify-content:initial;overflow:hidden;background:linear-gradient(165deg,rgba(15,20,28,.97),rgba(7,10,15,.98));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 48px rgba(0,0,0,.32);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.download-big:before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;background:radial-gradient(circle at 86% 10%,var(--card-glow,rgba(255,108,40,.2)),transparent 32%)}
.download-big:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;opacity:.75;background:linear-gradient(90deg,transparent,var(--card-accent,#ff7140),transparent)}
.download-big:hover{transform:translateY(-7px);border-color:var(--card-accent,#ff7140);box-shadow:0 24px 62px rgba(0,0,0,.43),0 0 28px var(--card-glow,rgba(255,90,40,.12))}
.download-big.windows{--card-accent:#ff5541;--card-glow:rgba(255,65,40,.22);border-color:rgba(255,85,65,.36)}
.download-big.apple{--card-accent:#dce8ff;--card-glow:rgba(139,185,255,.2);border-color:rgba(188,210,245,.3)}
.download-big.android{--card-accent:#55e77e;--card-glow:rgba(73,226,111,.2);border-color:rgba(82,223,119,.34)}
.download-card-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:27px}
.platform-icon{width:66px;height:66px;display:grid;place-items:center;border-radius:19px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);box-shadow:inset 0 1px rgba(255,255,255,.05)}
.platform-icon i{font-size:34px}.windows .platform-icon i{color:#ff5b49}.apple .platform-icon i{color:#fff}.android .platform-icon i{color:#65ef8b}
.platform-badge{min-width:42px;height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);color:#bbc2cd;font-size:8px;font-weight:900;letter-spacing:1px}
.download-card-copy{position:relative;z-index:2}
.download-card-copy small{display:block;color:var(--card-accent);font-size:8px;font-weight:900;letter-spacing:1.5px}
.download-card-copy h3{margin:7px 0 9px;font-size:25px;line-height:1.2}
.download-card-copy p{min-height:60px;margin:0;color:#9fa8b6;font-size:10.5px;line-height:1.75}
.download-meta{position:relative;z-index:2;display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.download-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:#aeb5c0;font-size:8.5px}
.download-meta i{color:var(--card-accent)}
.download-cta{position:relative;z-index:2;margin-top:auto;min-height:48px;padding:0 15px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;border:1px solid color-mix(in srgb,var(--card-accent) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--card-accent) 14%,transparent),rgba(255,255,255,.025));font-size:10px;font-weight:900;letter-spacing:.5px}
.download-cta i{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:var(--card-accent);color:#101318}
.windows .download-cta i{color:white}.android .download-cta i{color:#072d14}

.download-help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.download-help-grid article{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;min-height:104px;padding:17px;border:1px solid rgba(255,255,255,.075);border-radius:15px;background:rgba(9,13,18,.86);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.help-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(255,111,42,.1);border:1px solid rgba(255,113,43,.2);color:#ff9847}
.download-help-grid b{font-size:11px}.download-help-grid p{margin:5px 0 0;color:#929ba8;font-size:9px;line-height:1.65}

@media(max-width:900px){
  .download-page-shell{padding-top:24px;padding-bottom:82px}
  .download-hero{grid-template-columns:1fr;min-height:0;padding:27px 24px;border-radius:18px}
  .download-hero-mark{position:absolute;right:-30px;bottom:-40px;width:160px;height:160px;opacity:.28}
  .download-hero-copy{padding-right:18px}
  .download-hero h2{font-size:clamp(31px,7vw,46px);letter-spacing:-1.4px}
  .download-page-grid{grid-template-columns:1fr;gap:12px}
  .download-big{min-height:0;padding:19px;border-radius:17px;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:0;align-items:start}
  .download-card-top{grid-column:1;grid-row:1/4;display:block;margin:0}
  .platform-icon{width:54px;height:54px;border-radius:15px}.platform-icon i{font-size:28px}
  .platform-badge{margin-top:8px;width:54px;padding:0 6px;height:22px}
  .download-card-copy{grid-column:2}.download-card-copy h3{font-size:20px;margin:4px 0 6px}.download-card-copy p{min-height:0;font-size:9.5px;line-height:1.6}
  .download-meta{grid-column:2;margin:12px 0 10px}.download-meta span{padding:6px 7px;font-size:7.5px}
  .download-cta{grid-column:2;min-height:42px;margin:0;font-size:9px}
  .download-help-grid{grid-template-columns:1fr;gap:9px}.download-help-grid article{min-height:0;padding:14px}
}

@media(max-width:520px){
  .download-page-shell{padding-top:16px}
  .download-hero{padding:22px 18px;margin-bottom:12px;border-radius:16px}
  .download-kicker{font-size:8px;letter-spacing:1.2px}
  .download-hero h2{font-size:30px;line-height:1.08;margin:8px 0 10px}.download-hero-copy>p{font-size:10px;line-height:1.7}
  .download-quick-info{gap:6px;margin-top:15px}.download-quick-info span{min-height:30px;padding:0 9px;font-size:7.5px}
  .download-big{grid-template-columns:50px minmax(0,1fr);padding:16px;column-gap:11px;border-radius:15px}
  .platform-icon{width:48px;height:48px;border-radius:13px}.platform-icon i{font-size:25px}.platform-badge{width:48px;height:20px;font-size:7px}
  .download-card-copy small{font-size:7px}.download-card-copy h3{font-size:17px}.download-card-copy p{font-size:8.5px}
  .download-meta{gap:5px;margin:9px 0}.download-meta span{font-size:7px}
  .download-cta{min-height:39px;padding:0 11px;font-size:8px}.download-cta i{width:26px;height:26px}
  .download-help-grid article{grid-template-columns:38px 1fr;gap:10px;padding:12px}.help-icon{width:36px;height:36px;border-radius:10px}.download-help-grid b{font-size:10px}.download-help-grid p{font-size:8px}
}

/* =====================================================================
   FINAL POST CARD FIX - KHÔNG DÙNG .post-visual
   Dùng với HTML mới: .post-body > .post-card-top + h3 + .post-description
   + .post-footer. Override các layout cũ để card đẹp trên PC + mobile.
===================================================================== */

/* Lưới trang chủ / trang tin tức */
.news-cards,
#homePosts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.posts-list,
#postsGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

/* Reset layout cũ từng dùng cột hình .post-visual */
.news-card,
.post-row{
    position:relative !important;
    display:block !important;
    grid-template-columns:none !important;
    min-width:0;
    overflow:hidden;

    background:
        radial-gradient(circle at 100% 0,rgba(255,112,42,.08),transparent 34%),
        linear-gradient(145deg,rgba(17,22,30,.97),rgba(9,12,17,.98));

    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;

    box-shadow:
        0 14px 36px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

/* Đường nhấn Naruto ở đầu card */
.news-card::before,
.post-row::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    pointer-events:none;
    background:linear-gradient(90deg,#ff4f23 0,#ff9b35 44%,transparent 88%);
}

.news-card::after,
.post-row::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-55px;
    top:-55px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(255,111,43,.1),transparent 68%);
}

.news-card:hover,
.post-row:hover{
    transform:translateY(-3px);
    border-color:rgba(255,112,46,.28);
    box-shadow:
        0 18px 46px rgba(0,0,0,.34),
        0 0 24px rgba(255,87,31,.055);
}

/* Nội dung */
.news-card .post-body,
.post-row .post-body,
.post-body{
    position:relative;
    z-index:2;
    padding:18px !important;
}

/* Hàng tag + ngày */
.post-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 12px;
}

/* Xóa hoàn toàn kiểu absolute cũ của .post-tag */
.post-tag{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:auto !important;

    display:inline-flex;
    align-items:center;
    gap:6px;

    width:max-content;
    max-width:65%;
    min-height:26px;
    padding:5px 9px !important;

    border-radius:999px !important;
    border:1px solid rgba(255,116,48,.22);

    background:linear-gradient(135deg,rgba(255,87,31,.16),rgba(255,153,45,.075)) !important;
    color:#ffab72 !important;

    font-size:9px !important;
    font-weight:800;
    letter-spacing:.2px;
    line-height:1;
    white-space:nowrap;
}

.post-tag i{
    font-size:9px;
    color:#ff8c3d;
}

.post-date{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    color:#7f8895;
    font-size:9px;
    white-space:nowrap;
}

.post-date i{
    color:#929aa6;
}

/* Tiêu đề */
.news-card .post-body h3,
.post-row .post-body h3,
.post-title,
.post-body h3{
    margin:0 0 9px !important;
    color:#f8f9fb;
    font-size:16px !important;
    line-height:1.45;
    font-weight:800;
    letter-spacing:-.15px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

/* Preview */
.news-card .post-description,
.post-row .post-description,
.post-description{
    position:static !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0;
    color:#aab2be;
    font-size:11px !important;
    line-height:1.72 !important;
}

.post-row .post-description::after{
    content:none !important;
    display:none !important;
}

.post-description.preview{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

/* Footer card */
.post-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.055);
}

.post-author{
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#7f8996;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.post-author i{
    flex:0 0 auto;
    color:#ff8c47;
}

/* Nút đọc bài */
.read-post{
    margin:0 !important;
    flex:0 0 auto;
    min-height:32px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    padding:6px 10px !important;

    border:1px solid rgba(255,112,45,.2) !important;
    border-radius:9px;

    background:linear-gradient(135deg,rgba(255,87,31,.12),rgba(255,144,49,.055)) !important;
    color:#ff9e64 !important;

    font-size:9px !important;
    font-weight:800;
    line-height:1;
    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.read-post i{
    font-size:8px;
    transition:transform .18s ease;
}

.read-post:hover{
    color:#fff !important;
    border-color:#ff6730 !important;
    background:linear-gradient(135deg,#ff5a24,#dc2d1f) !important;
    transform:translateY(-1px);
}

.read-post:hover i{
    transform:translateX(2px);
}

/* PC nhỏ / tablet */
@media(max-width:1100px){
    .news-cards,
    #homePosts{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .posts-list,
    #postsGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* Mobile */
@media(max-width:900px){
    .news-cards,
    #homePosts,
    .posts-list,
    #postsGrid{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .news-card,
    .post-row{
        display:block !important;
        grid-template-columns:none !important;
        border-radius:14px !important;
    }

    .news-card:hover,
    .post-row:hover{
        transform:none;
    }

    .news-card .post-body,
    .post-row .post-body,
    .post-body{
        padding:14px !important;
    }

    .post-card-top{
        gap:8px;
        margin-bottom:9px;
    }

    .post-tag{
        min-height:24px;
        padding:4px 8px !important;
        font-size:8px !important;
    }

    .post-tag i{
        font-size:8px;
    }

    .post-date{
        font-size:8px;
    }

    .news-card .post-body h3,
    .post-row .post-body h3,
    .post-title,
    .post-body h3{
        font-size:14px !important;
        line-height:1.42;
        margin-bottom:7px !important;
    }

    .news-card .post-description,
    .post-row .post-description,
    .post-description{
        font-size:10px !important;
        line-height:1.65 !important;
    }

    .post-description.preview{
        -webkit-line-clamp:2;
    }

    .post-footer{
        margin-top:11px;
        padding-top:10px;
    }

    .post-author{
        font-size:8px;
        max-width:48%;
    }

    .read-post{
        min-height:31px;
        padding:6px 9px !important;
        font-size:8px !important;
    }
}

/* Điện thoại rất nhỏ */
@media(max-width:420px){
    .post-card-top{
        align-items:flex-start;
    }

    .post-date{
        padding-top:5px;
    }

    .news-card .post-body,
    .post-row .post-body,
    .post-body{
        padding:12px !important;
    }

    .post-footer{
        gap:7px;
    }

    .post-author{
        max-width:43%;
    }
}



/* =========================================================
   FIX MOBILE OVERSCROLL / HEADER + FOOTER BOUNCE
   Giữ header + thanh dock ổn định khi kéo quá đầu/cuối trang.
   ========================================================= */
@media (max-width: 900px) {
    html {
        min-height: 100%;
        background: #07080b;
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
    }

    body {
        min-height: 100dvh;
        background: #07080b;
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
    }

    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(62px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        z-index: 1000 !important;
        background: #08090d;
        background: linear-gradient(180deg, rgba(8,9,13,1) 0%, rgba(8,10,15,.98) 100%);
        border-bottom: 1px solid rgba(255,105,42,.24);
        box-shadow: 0 8px 24px rgba(0,0,0,.42);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .nav-shell { height: 62px !important; }

    #app {
        padding-top: calc(62px + env(safe-area-inset-top));
    }

    .nav {
        top: calc(70px + env(safe-area-inset-top)) !important;
        max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }

    .mobile-dock {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        background: #080a0e !important;
        background: linear-gradient(180deg, rgba(8,10,14,.98), rgba(7,8,11,1)) !important;
        z-index: 1100 !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    body::before {
        content: "";
        position: fixed;
        z-index: -9999;
        inset: -120px 0;
        width: 100%;
        height: calc(100dvh + 240px);
        background: #07080b;
        pointer-events: none;
    }

    .site-bg,
    .site-vignette,
    .leaf-layer,
    .ninja-fx {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    footer {
        position: relative;
        z-index: 2;
        background: #070709;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* =========================================================
   FIX MODAL BÀI VIẾT BỊ HEADER / MOBILE DOCK ĐÈ
   ========================================================= */
.post-modal{
    z-index: 5000 !important;
}

.post-modal .modal-backdrop{
    z-index: 0 !important;
}

.post-modal .modal-card{
    z-index: 1 !important;
}

@media (max-width: 900px){
    .post-modal{
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        padding:
            calc(12px + env(safe-area-inset-top))
            12px
            calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .post-modal.show{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .post-modal .modal-card{
        position: relative !important;
        z-index: 5001 !important;
        width: 100% !important;
        max-height: calc(
            100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
        ) !important;
        margin: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        padding: 0 !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .post-modal .modal-close{
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 5010 !important;
    }

    .post-modal .modal-meta{
        padding: 18px 65px 4px 17px !important;
    }

    .post-modal .modal-card h2{
        margin: 8px 65px 14px 17px !important;
    }

    .post-modal .modal-content{
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 17px 22px !important;
    }

    /* Khi modal mở, header và dock vẫn tồn tại nhưng không thể đè modal */
    body.modal-open .topbar,
    body.modal-open .mobile-dock{
        pointer-events: none;
    }
}

/* =========================================================
   FINAL FIX: MODAL PHẢI ĐÈ LÊN CẢ HEADER + FOOTER / MOBILE DOCK
   Nguyên nhân: #app đang tạo stacking-context z-index thấp, nên z-index
   của .post-modal dù rất cao vẫn không vượt được header bên ngoài #app.
   ========================================================= */
body.modal-open #app{
    position: relative !important;
    z-index: 6000 !important;
}

body.modal-open .post-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    isolation: isolate;
}

body.modal-open .post-modal .modal-backdrop{
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(2,3,6,.86) !important;
}

body.modal-open .post-modal .modal-card{
    position: relative !important;
    z-index: 2 !important;
}

/* Header/footer/dock phải nằm PHÍA DƯỚI lớp đọc bài */
body.modal-open .topbar{
    z-index: 100 !important;
    pointer-events: none !important;
}

body.modal-open .mobile-dock{
    z-index: 100 !important;
    pointer-events: none !important;
}

body.modal-open footer{
    z-index: 1 !important;
    pointer-events: none !important;
}

@media (max-width:900px){
    body.modal-open .post-modal{
        padding:
            calc(10px + env(safe-area-inset-top))
            10px
            calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.modal-open .post-modal.show{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.modal-open .post-modal .modal-card{
        width:100% !important;
        max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin:0 !important;
    }
}
/* ===== FIX THÔNG BÁO ĐĂNG KÝ ===== */
.toast {
    position: fixed !important;
    top: 90px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 999999 !important;

    width: min(390px, calc(100% - 40px));
    padding: 14px 18px !important;

    background: linear-gradient(145deg, #151b25, #0b0e14) !important;
    border: 1px solid rgba(255, 122, 53, .45) !important;
    border-radius: 13px !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.55),
        0 0 22px rgba(255,91,31,.12) !important;

    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.5;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-15px) !important;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease !important;
}

.toast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* THÀNH CÔNG */
.toast.success {
    color: #baffd8 !important;
    border-color: rgba(57, 220, 133, .5) !important;
    background: linear-gradient(145deg, #123323, #091a12) !important;
}

/* THẤT BẠI */
.toast.error {
    color: #ffd1cc !important;
    border-color: rgba(255, 82, 68, .55) !important;
    background: linear-gradient(145deg, #391414, #180a0c) !important;
}


/* ===== MOBILE ===== */
@media (max-width: 900px) {

    .toast {
        /* nằm ngay dưới header */
        top: calc(72px + env(safe-area-inset-top)) !important;

        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: calc(100% - 24px) !important;
        max-width: 420px !important;

        padding: 12px 15px !important;

        text-align: center !important;

        transform: translate(-50%, -15px) !important;

        /* cao hơn header, dock và modal */
        z-index: 999999 !important;
    }

    .toast.show {
        transform: translate(-50%, 0) !important;
    }
}