:root{--bg-main:#020308;--bg-panel:rgba(8, 10, 26, 0.96);--bg-panel-soft:rgba(10, 12, 30, 0.96);--bg-glass:rgba(5, 6, 20, 0.94);--primary:#ffc93c;--primary-soft:#ffe082;--primary-strong:#ffca28;--accent:#ff7043;--info:#29b6f6;--text-main:#fffdf4;--text-muted:#a7a196;--text-soft:#e7ddc6;--border-soft:rgba(255, 255, 255, 0.14);--border-strong:rgba(255, 215, 128, 0.85);--radius-xl:26px;--radius-lg:18px;--radius-md:12px;--shadow-soft:0 18px 50px rgba(0, 0, 0, 0.9);--shadow-strong:0 40px 110px rgba(0, 0, 0, 1);--transition-fast:0.18s ease-out}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Tahoma,sans-serif;color:var(--text-main);background:radial-gradient(circle at top,rgb(255 213 79 / .3),transparent 55%),radial-gradient(circle at bottom,rgb(21 101 192 / .35),transparent 60%),#000;min-height:100vh;scroll-behavior:smooth}body{position:relative;isolation:isolate}body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 0% 0%,rgb(255 255 255 / .06),transparent 60%),radial-gradient(circle at 100% 100%,rgb(255 87 34 / .35),transparent 60%);opacity:.55;pointer-events:none;z-index:-2}body::after{content:"";position:fixed;inset:0;mix-blend-mode:soft-light;opacity:.25;pointer-events:none;z-index:-3}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}.app-shell{max-width:1440px;margin:16px auto 32px;padding:0 18px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.sidebar{background:linear-gradient(160deg,rgb(4 5 20 / .98),rgb(2 2 10 / .98));border-radius:26px;border:1px solid var(--border-strong);box-shadow:var(--shadow-strong);padding:16px 14px 14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px;height:calc(100vh - 32px);max-height:900px;overflow:hidden}.sidebar-top{display:flex;align-items:center;gap:12px;padding:6px 8px 10px;border-bottom:1px solid rgb(255 255 255 / .08);margin:-6px -6px 0}.brand-logo{width:58px;height:58px;border-radius:18px;background:url(images/logo.png) center / contain no-repeat;border:1px solid rgb(255 215 128 / .95);box-shadow:0 0 18px rgb(255 215 128),0 0 40px rgb(255 111 0 / .9),0 0 40px rgb(33 150 243 / .85);overflow:hidden;flex-shrink:0}.brand-logo::after{content:""}.brand-text-main{font-size:18px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--primary);text-shadow:0 0 3px #000,0 0 14px rgb(255 213 79 / .96),0 0 26px rgb(255 87 34 / .9);margin-bottom:3px}.brand-text-sub{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.sidebar-section-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin:4px 4px 2px}.sidebar-nav{display:flex;flex-direction:column;gap:6px;padding:4px 2px 8px;border-radius:18px;background:radial-gradient(circle at top,rgb(255 255 255 / .06),transparent 55%) rgb(3 4 14 / .98);border:1px solid rgb(255 255 255 / .05);box-shadow:0 10px 28px rgb(0 0 0 / .9)}.nav-link{font-size:13px;padding:7px 11px;border-radius:999px;border:1px solid #fff0;background:#fff0;color:#fff3e0;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast)}.nav-link span.icon{width:20px;text-align:center}.nav-link:hover{transform:translateY(-1px);background:rgb(16 16 34 / .98);border-color:rgb(255 241 118 / .8);box-shadow:0 0 0 1px rgb(0 0 0 / .9),0 11px 24px rgb(0 0 0 / .95),0 0 16px rgb(255 193 7 / .4)}.nav-link-primary{background:linear-gradient(135deg,#ffb300,#ff6f00);border-color:rgb(255 255 255 / .7);color:#1b1301;font-weight:700;box-shadow:0 0 0 1px rgb(0 0 0 / .85),0 14px 30px rgb(255 111 0 / .95),0 0 30px rgb(255 193 7 / .9)}.nav-link-primary:hover{background:linear-gradient(135deg,#ffd54f,#ff9100);transform:translateY(-1px) scale(1.03)}.nav-link .nav-text{font-size:25px;font-weight:700}.nav-link .nav-text1{font-size:20px;font-weight:700}.badge-new{font-size:10px;padding:1px 7px;border-radius:999px;background:rgb(0 0 0 / .86);border:1px solid rgb(255 235 59 / .9);color:#ffeb3b;text-shadow:0 0 6px #ffea00;margin-left:4px;animation:badgeColor 2.1s linear infinite}.sidebar-block{border-radius:18px;background:var(--bg-panel-soft);border:1px solid rgb(255 255 255 / .06);padding:9px 10px;font-size:12px;color:var(--text-soft);box-shadow:0 10px 26px rgb(0 0 0 / .9)}.status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;border:1px solid rgb(129 199 132 / .95);background:rgb(0 0 0 / .9);padding:3px 10px;font-size:11px;margin-bottom:6px}.status-dot{width:9px;height:9px;border-radius:999px;background:#81c784;box-shadow:0 0 8px rgb(129 199 132);animation:dotPulse 1.3s ease-in-out infinite}.sidebar-block strong{color:var(--primary-soft)}.small-list{list-style:none;padding:0;margin:4px 0 0;font-size:12px}.small-list li{padding:2px 0}.sidebar-footer{margin-top:auto;font-size:11px;color:var(--text-muted);border-top:1px solid rgb(255 255 255 / .06);padding-top:7px}.sidebar-footer span{color:#ffe082}.main-area{display:flex;flex-direction:column;gap:14px}.top-strip{border-radius:18px;background:radial-gradient(circle at top,rgb(255 255 255 / .05),transparent 55%) rgb(3 4 14 / .98);border:1px solid rgb(255 255 255 / .08);box-shadow:0 12px 32px rgb(0 0 0 / .95);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--text-soft)}.top-strip-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top-strip-left span:first-child{font-weight:600;color:var(--primary-soft)}.top-strip-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.badge-pill{border-radius:999px;padding:4px 10px;border:1px solid rgb(255 215 128 / .85);background:rgb(0 0 0 / .88);display:inline-flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap}.badge-pill.warn{border-color:rgb(255 193 7);color:#ffe082}.hero.hero-banner{position:relative;height:420px;padding:0;overflow:hidden;border-radius:26px;border:1px solid var(--border-strong);box-shadow:var(--shadow-strong);background:rgb(0 0 0 / .55)}.hero.hero-banner .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.section{border-radius:var(--radius-xl);background:rgb(5 6 20 / .96);border:1px solid rgb(255 255 255 / .04);box-shadow:var(--shadow-soft);padding:14px 16px}.section-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}.section-title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--primary-soft)}.section-sub{font-size:12px;color:var(--text-muted)}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{background:var(--bg-glass);border-radius:var(--radius-lg);border:1px solid var(--border-soft);padding:11px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgb(255 255 255 / .05),transparent 60%);opacity:.6;pointer-events:none}.card-inner{position:relative;z-index:1}.card-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.card-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--primary-strong)}.card-tag{font-size:11px;padding:3px 8px;border-radius:999px;background:rgb(1 22 39 / .94);border:1px solid rgb(128 222 234 / .9);color:#b2ebf2;text-transform:uppercase;letter-spacing:.5px}.list{list-style:none;padding:0;margin:0;font-size:13px;color:#ffe9c4}.list li{padding:4px 0;display:flex;gap:6px}.list li::before{content:"★";font-size:11px;margin-top:2px;color:#ffca28;text-shadow:0 0 5px rgb(255 202 40 / .9)}.roadmap{border-radius:var(--radius-xl);background:radial-gradient(circle at top,rgb(255 193 7 / .16),transparent 60%) rgb(5 6 20 / .98);border:1px solid var(--border-strong);box-shadow:var(--shadow-soft);padding:14px}.roadmap-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px} .roadmap-note{font-size:12px;color:var(--text-muted)}.roadmap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.roadmap-col{background:rgb(7 7 16 / .98);border-radius:16px;padding:9px;border:1px solid rgb(255 215 128 / .6);box-shadow:inset 0 0 14px rgb(255 255 255 / .03),0 14px 30px rgb(0 0 0 / .96)}.roadmap-date{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--primary-soft);margin-bottom:4px}.roadmap-list{padding-left:16px;margin:0;font-size:13px;color:#fff3e0}.roadmap-list li{margin-bottom:3px}.site-footer{padding:12px 16px 6px;font-size:12px;text-align:center;color:var(--text-muted)}.site-footer span{color:#ffe082}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at top,rgb(0 0 0 / .98),rgb(0 0 0 / .92));z-index:9999}.modal--visible{display:flex}.modal-content{position:relative;width:100%;max-width:640px;padding:20px 20px 16px;border-radius:20px;border:1px solid rgb(255 241 118 / .85);background:linear-gradient(130deg,rgb(255 193 7 / .16),rgb(0 0 0 / .97));box-shadow:0 0 0 1px rgb(0 0 0 / .9),0 26px 60px rgb(0 0 0),0 0 32px rgb(255 202 40 / .5);overflow:hidden;color:#fffde7}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.modal-title{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;text-shadow:0 0 6px #000,0 0 13px rgb(255 213 79 / .9)}.modal-close{background:rgb(0 0 0 / .78);border-radius:999px;border:1px solid rgb(255 235 59 / .86);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#ffeb3b;transition:transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}.modal-close:hover{transform:scale(1.08);background:rgb(255 235 59 / .15);box-shadow:0 0 14px rgb(255 235 59 / .85)}.download-group-title{font-size:14px;font-weight:700;color:#ffe082;text-shadow:0 0 5px #000}.download-links{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.download-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;border:1px solid rgb(255 215 128 / .85);background:rgb(0 0 0 / .82);color:#fffde7;font-size:14px;font-weight:600;box-shadow:0 0 0 1px rgb(0 0 0 / .9),0 10px 22px rgb(0 0 0 / .98);transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}.download-link span{font-size:11px;opacity:.9}.download-link:hover{transform:translateY(-1px);background:rgb(255 224 130 / .06);border-color:rgb(255 241 118 / .95);box-shadow:0 0 0 1px rgb(255 213 128 / .65),0 13px 30px rgb(0 0 0)}.modal-footer{margin-top:10px;text-align:right}.btn-ghost{border-radius:999px;padding:7px 14px;font-size:14px;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgb(255 213 128 / .8);background:rgb(0 0 0 / .82);color:#fff3e0;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}.btn-ghost:hover{transform:translateY(-1px);background:rgb(255 224 130 / .1);border-color:rgb(255 241 118 / .95)}#popup-notice{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at top,rgb(0 0 0 / .96),rgb(0 0 0 / .9));z-index:10000}#popup-notice.hidden{display:none}.popup-card{max-width:520px;width:100%;padding:22px 22px 18px;border-radius:20px;border:1px solid rgb(255 241 118 / .9);background:radial-gradient(circle at top,rgb(255 193 7 / .23),transparent 55%),rgb(5 5 10 / .98);text-align:center;box-shadow:0 0 0 1px rgb(0 0 0 / .96),0 30px 60px rgb(0 0 0),0 0 35px rgb(255 193 7 / .7);color:#fff9c4}.popup-card h2{margin:4px 0;font-size:18px;text-transform:uppercase;text-shadow:0 0 5px #000,0 0 14px rgb(255 213 79 / .9)}.popup-card p{margin:6px 0;font-size:14px}#popup-close{margin-top:13px;padding:8px 18px;border-radius:999px;border:none;background:linear-gradient(135deg,#ffb300,#ff6f00);color:#1b1301;font-size:14px;font-weight:700;letter-spacing:.6px;cursor:pointer;text-transform:uppercase;box-shadow:0 0 0 1px rgb(0 0 0 / .9),0 16px 32px rgb(255 111 0 / .98),0 0 30px rgb(255 193 7 / .95);transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}#popup-close:hover{transform:translateY(-1px) scale(1.03);background:linear-gradient(135deg,#ffd54f,#ff9100)}#zalo-chat-button{position:fixed;right:26px;bottom:26px;z-index:9500;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,#0084ff,#00c1ff);color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 24px rgb(0 0 0 / .95),0 0 30px rgb(0 176 255 / .98);transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);white-space:nowrap}#zalo-chat-button:hover{transform:translateY(-2px) scale(1.04);background:linear-gradient(135deg,#00a4ff,#00e5ff);box-shadow:0 13px 30px rgb(0 0 0 / .98),0 0 34px rgb(0 188 255)}@keyframes dotPulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:.9}}@keyframes badgeColor{0%{color:#ff7043;text-shadow:0 0 6px #ff7043}25%{color:#ffc107;text-shadow:0 0 7px #ffc107}50%{color:#66bb6a;text-shadow:0 0 7px #66bb6a}75%{color:#29b6f6;text-shadow:0 0 7px #29b6f6}100%{color:#ec407a;text-shadow:0 0 7px #ec407a}}@media (max-width:1300px){.app-shell{grid-template-columns:260px minmax(0,1fr)}.hero.hero-banner{height:360px}}.music-overlay{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgb(0 0 0 / .72);border:1px solid rgb(255 193 7 / .95);color:#ffe082;font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;user-select:none;white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgb(0 0 0 / .85),0 14px 36px rgb(0 0 0 / .7),0 0 22px rgb(255 193 7 / .28)}.music-overlay:hover{background:rgb(255 193 7 / .12);box-shadow:0 0 0 1px rgb(0 0 0 / .88),0 16px 42px rgb(0 0 0 / .78),0 0 28px rgb(255 193 7 / .42);transform:translateX(-50%) translateY(-1px)}.music-overlay .music-icon{font-size:13px;line-height:1}:root{--mu-beat:0}.hero-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.hero-overlay #music-control{pointer-events:auto}.hero-title-wrap{position:absolute;left:50%;top:90px;transform:translateX(-50%);text-align:center;z-index:12}.hero-title{font-weight:1000;letter-spacing:2px;text-transform:uppercase;font-size:clamp(44px, 6vw, 88px);line-height:1;padding:6px 14px;border-radius:14px;background:linear-gradient(90deg,rgb(255 255 255 / .15),rgb(255 220 150 / .95),rgb(255 160 60 / .95),rgb(255 255 255 / .15));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:#fff0;text-shadow:0 0 calc(10px + var(--mu-beat) * 28px) rgb(255 193 7 / .65),0 0 calc(8px + var(--mu-beat) * 24px) rgb(255 111 0 / .45),0 0 calc(8px + var(--mu-beat) * 22px) rgb(170 90 255 / .4);transform:scale(calc(1 + var(--mu-beat) * 0.06));filter:drop-shadow(0 6px 18px rgb(0 0 0 / .75));animation:muShimmer 1.9s linear infinite}@keyframes muShimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}.hero-sub{margin-top:10px;font-weight:900;letter-spacing:4px;text-transform:uppercase;font-size:clamp(16px, 2.2vw, 26px);color:rgb(255 240 205 / .95);text-shadow:0 0 calc(8px + var(--mu-beat) * 18px) rgb(255 193 7 / .55),0 0 calc(8px + var(--mu-beat) * 18px) rgb(170 90 255 / .35);opacity:calc(0.75 + var(--mu-beat) * 0.25);transform:translateY(calc(var(--mu-beat) * -2px))}.music-overlay{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:13;box-shadow:0 0 calc(18px + var(--mu-beat) * 44px) rgb(255 193 7 / .38),0 0 calc(10px + var(--mu-beat) * 28px) rgb(170 90 255 / .28)}.music-overlay::before{content:"";position:absolute;inset:-2px;border-radius:999px;pointer-events:none;opacity:calc(0.35 + var(--mu-beat) * 0.55);background:conic-gradient(from 0deg,#fff0,rgb(255 230 160 / .6),rgb(170 90 255 / .45),rgb(255 200 70 / .6),#fff0);filter:blur(1.2px);animation:muSpin 1.9s linear infinite}@keyframes muSpin{to{transform:rotate(360deg)}}.hero-lightning{position:absolute;inset:0;z-index:11;pointer-events:none;mix-blend-mode:screen;opacity:calc(0.12 + var(--mu-beat) * 0.38);filter:blur(.2px) drop-shadow(0 0 18px rgb(170 90 255 / .35)) drop-shadow(0 0 18px rgb(255 193 7 / .28))}.hero-lightning::before,.hero-lightning::after{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 30% 25%,rgb(170 90 255 / .55),transparent 55%),radial-gradient(circle at 70% 35%,rgb(255 193 7 / .42),transparent 58%),radial-gradient(circle at 45% 75%,rgb(120 200 255 / .2),transparent 60%),repeating-linear-gradient(115deg,#fff0 0,#fff0 18px,rgb(190 130 255 / .26) 22px,rgb(255 220 150 / .22) 26px,#fff0 32px,#fff0 54px);opacity:1;animation:arcFlicker 1.2s steps(2,end) infinite}.hero-lightning::after{transform:rotate(180deg) scale(1.05);opacity:.65;animation-duration:0.9s}@keyframes arcFlicker{0%{filter:brightness(.8);opacity:.15}20%{filter:brightness(1.25);opacity:.65}35%{filter:brightness(.9);opacity:.25}55%{filter:brightness(1.4);opacity:.85}70%{filter:brightness(1);opacity:.35}100%{filter:brightness(1.2);opacity:.6}} .kinh-gui-title { display: inline-block !important; color: #ff8c00 !important; opacity: 1 !important; filter: brightness(1.6) contrast(1.3) !important; font-size: 20px !important; font-weight: 1000 !important; letter-spacing: 1.2px !important; text-transform: uppercase; -webkit-text-stroke: 0 !important; text-shadow: 0 1px 2px #000, 0 0 4px #fff0b3, 0 0 8px #ffb300, 0 0 16px #ff8c00, 0 0 28px #ff4500 !important; } .status-dot { background:#81c784; box-shadow:0 0 8px rgb(129 199 132); animation:dotPulse 1.3s ease-in-out infinite; } /* DẤU TÍCH XANH ĐẦU DÒNG */ .roadmap-list { list-style: none !important; padding-left: 0 !important; margin: 0 !important; } .roadmap-list li { position: relative; padding-left: 24px !important; margin-bottom: 7px !important; color: #fff7df; } .roadmap-list li::before { content: "✓"; position: absolute; left: 0; top: 0px; color: #00ff66; font-size: 15px; font-weight: 900; text-shadow: 0 0 4px #00ff66, 0 0 8px #00ff66, 0 0 16px rgba(0, 255, 102, 0.95), 0 0 28px rgba(0, 255, 102, 0.75); animation: roadmapSyncBlink 1.2s ease-in-out infinite !important; } /* NGÔI SAO ĐẦU CÁC CHƯƠNG */ .roadmap-date { position: relative; padding-left: 24px !important; color: #ffe066 !important; font-weight: 900 !important; text-shadow: 0 0 4px #000, 0 0 8px #ffe066, 0 0 16px rgba(255, 180, 0, 0.8); } .roadmap-date::before { content: "★"; position: absolute; left: 0; top: -1px; color: #ffd700; font-size: 16px; font-weight: 900; text-shadow: 0 0 4px #ffffff, 0 0 9px #ffd700, 0 0 18px #ff9900, 0 0 32px rgba(255, 120, 0, 0.9); animation: roadmapSyncBlink 1.2s ease-in-out infinite !important; } /* HIỆU ỨNG NHẤP NHÁY ĐỒNG ĐIỆU */ @keyframes roadmapSyncBlink { 0% { opacity: 0.45; transform: scale(0.85); filter: brightness(0.8); } 50% { opacity: 1; transform: scale(1.25); filter: brightness(1.9); } 100% { opacity: 0.45; transform: scale(0.85); filter: brightness(0.8); } } /* TRÁI TIM NHẤP NHÁY NHẸ */ .heart-blink { display: inline-block; animation: heartBlinkSoft 1.2s ease-in-out infinite; filter: drop-shadow(0 0 4px #ff6fd8) drop-shadow(0 0 8px rgba(255, 80, 200, 0.65)); } @keyframes heartBlinkSoft { 0% { opacity: 0.75; transform: scale(0.96); filter: drop-shadow(0 0 3px #ff6fd8) drop-shadow(0 0 6px rgba(255, 80, 200, 0.45)); } 50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px #ff4fd8) drop-shadow(0 0 14px rgba(255, 20, 147, 0.65)); } 100% { opacity: 0.75; transform: scale(0.96); filter: drop-shadow(0 0 3px #ff6fd8) drop-shadow(0 0 6px rgba(255, 80, 200, 0.45)); } } /* LÁ CỜ VIỆT NAM - UỐN NHẸ THEO GIÓ */ .vn-flag { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 18px; margin-right: 7px; vertical-align: -3px; background: linear-gradient( 90deg, #c91f19 0%, #da251d 35%, #f2382f 50%, #da251d 70%, #c91f19 100% ); background-size: 160% 100%; border-radius: 3px; overflow: hidden; transform-origin: left center; animation: vnFlagSoftWind 2.2s ease-in-out infinite, vnFlagSoftLight 3s linear infinite; box-shadow: 0 0 4px rgba(218, 37, 29, 0.8), 0 0 8px rgba(255, 80, 40, 0.55); } /* Ngôi sao vàng */ .vn-flag::before { content: ""; position: relative; z-index: 2; width: 11px; height: 11px; background: #ffeb3b; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); filter: drop-shadow(0 0 2px #ffeb3b) drop-shadow(0 0 4px rgba(255, 235, 59, 0.8)); } /* Lớp sáng nhẹ tạo cảm giác gió */ .vn-flag::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.16) 38%, transparent 70% ); background-size: 180% 100%; animation: vnFlagSoftShine 2.2s ease-in-out infinite; pointer-events: none; } /* Uốn nhẹ như có gió */ @keyframes vnFlagSoftWind { 0% { transform: perspective(100px) rotateY(0deg) skewY(0deg); clip-path: polygon(0% 0%, 100% 2%, 100% 98%, 0% 100%); } 25% { transform: perspective(100px) rotateY(-8deg) skewY(1.5deg); clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 0% 98%); } 50% { transform: perspective(100px) rotateY(6deg) skewY(-1.5deg); clip-path: polygon(0% 0%, 100% 4%, 100% 96%, 0% 100%); } 75% { transform: perspective(100px) rotateY(-5deg) skewY(1deg); clip-path: polygon(0% 3%, 100% 1%, 100% 99%, 0% 97%); } 100% { transform: perspective(100px) rotateY(0deg) skewY(0deg); clip-path: polygon(0% 0%, 100% 2%, 100% 98%, 0% 100%); } } /* Màu đỏ chạy nhẹ */ @keyframes vnFlagSoftLight { 0% { background-position: 0% 50%; } 100% { background-position: 160% 50%; } } /* Vệt sáng nhẹ */ @keyframes vnFlagSoftShine { 0% { background-position: -100% 50%; opacity: 0.4; } 50% { background-position: 100% 50%; opacity: 0.75; } 100% { background-position: 180% 50%; opacity: 0.4; } } /* ============================= */ /* MENU SIDEBAR - KHUNG GAME VIP */ /* ============================= */ .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 10px 6px !important; border-radius: 22px !important; background: radial-gradient(circle at top, rgba(255, 190, 80, 0.12), transparent 55%), linear-gradient(180deg, rgba(8, 10, 26, 0.98), rgba(2, 3, 12, 0.98)) !important; border: 1px solid rgba(255, 202, 90, 0.28) !important; box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.9) !important; } /* NÚT MENU CHUNG */ .nav-link { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 52px !important; padding: 11px 16px !important; border-radius: 16px !important; background: linear-gradient(180deg, #201203 0%, #100802 100%) !important; border: 1px solid rgba(255, 190, 80, 0.75) !important; color: #ffe7a3 !important; font-size: 15px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.85), 0 8px 20px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 145, 0, 0.22) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease !important; } /* ÁNH SÁNG QUÉT QUA NÚT */ .nav-link::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.22) 28%, transparent 55% ) !important; transform: translateX(-130%) !important; transition: transform 0.45s ease !important; pointer-events: none !important; } /* VIỀN TRONG */ .nav-link::after { content: "" !important; position: absolute !important; inset: 3px !important; border-radius: 12px !important; border: 1px solid rgba(255, 236, 180, 0.35) !important; pointer-events: none !important; } /* HOVER */ .nav-link:hover { transform: translateY(-2px) scale(1.015) !important; border-color: rgba(255, 230, 150, 0.98) !important; background: linear-gradient(180deg, #2a1704 0%, #130902 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -3px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.9), 0 12px 26px rgba(0, 0, 0, 0.75), 0 0 28px rgba(255, 174, 0, 0.45) !important; } .nav-link:hover::before { transform: translateX(130%) !important; } /* NÚT CAM CHÍNH */ .nav-link-primary { background: linear-gradient(180deg, #ffc13a 0%, #ff9800 45%, #ff6f00 100%) !important; border: 1px solid rgba(255, 245, 200, 0.95) !important; color: #1f1000 !important; font-weight: 1000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -4px 10px rgba(120, 45, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.9), 0 10px 22px rgba(120, 45, 0, 0.5), 0 0 24px rgba(255, 145, 0, 0.55) !important; } .nav-link-primary:hover { background: linear-gradient(180deg, #ffd15c 0%, #ffad16 45%, #ff7a00 100%) !important; transform: translateY(-2px) scale(1.025) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 10px rgba(120, 45, 0, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.9), 0 14px 30px rgba(120, 45, 0, 0.58), 0 0 34px rgba(255, 150, 0, 0.75) !important; } /* ICON TRONG NÚT */ .nav-link span.icon { width: 24px !important; min-width: 24px !important; text-align: center !important; font-size: 17px !important; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 8px rgba(255, 170, 0, 0.45)) !important; } /* CHỮ TRONG NÚT */ .nav-link .nav-text, .nav-link .nav-text1, .nav-link > span:not(.icon) { font-size: 16px !important; font-weight: 1000 !important; line-height: 1.1 !important; letter-spacing: 0.5px !important; } /* RIÊNG NÚT TẢI GAME TO HƠN MỘT CHÚT */ .nav-link .nav-text { font-size: 17px !important; } /* RIÊNG NÚT ĐUA TOP / SỰ KIỆN */ .nav-link .nav-text1 { font-size: 16px !important; } /* ===================================== */ /* MENU BÊN TRÁI - HOA VĂN CỔ ĐIỂN MU */ /* ===================================== */ .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 10px 6px !important; border-radius: 22px !important; background: radial-gradient(circle at top, rgba(255, 215, 120, 0.12), transparent 55%), linear-gradient(180deg, rgba(20, 8, 8, 0.98), rgba(5, 2, 8, 0.98)) !important; border: 1px solid rgba(255, 210, 120, 0.35) !important; box-shadow: inset 0 0 18px rgba(255, 220, 140, 0.05), 0 12px 28px rgba(0, 0, 0, 0.92), 0 0 22px rgba(255, 170, 0, 0.14) !important; } /* NÚT MENU */ .nav-link { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 54px !important; padding: 12px 16px !important; border-radius: 18px !important; background: radial-gradient(circle at 50% 0%, rgba(255, 220, 120, 0.18), transparent 45%), linear-gradient(180deg, #3a1209 0%, #1a0706 48%, #080305 100%) !important; border: 1px solid rgba(255, 210, 120, 0.78) !important; color: #fff0c0 !important; font-size: 15px !important; font-weight: 1000 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 10px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(255, 170, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.9), 0 8px 20px rgba(0, 0, 0, 0.72), 0 0 18px rgba(255, 160, 0, 0.22) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease !important; } /* HOA VĂN CHÌM KIỂU CỔ ĐIỂN */ .nav-link::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; background: radial-gradient(circle at 12% 50%, rgba(255, 225, 150, 0.22) 0 2px, transparent 3px), radial-gradient(circle at 88% 50%, rgba(255, 225, 150, 0.22) 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, rgba(255, 230, 160, 0.10) 0 18%, transparent 19%), linear-gradient(45deg, transparent 44%, rgba(255, 230, 160, 0.08) 48%, transparent 52%), linear-gradient(-45deg, transparent 44%, rgba(255, 230, 160, 0.08) 48%, transparent 52%), repeating-linear-gradient( 90deg, transparent 0 16px, rgba(255, 210, 120, 0.07) 16px 17px, transparent 17px 34px ); opacity: 0.8 !important; } /* VIỀN TRONG HOA VĂN */ .nav-link::after { content: "" !important; position: absolute !important; inset: 4px !important; border-radius: 14px !important; pointer-events: none !important; border: 1px solid rgba(255, 230, 160, 0.34) !important; box-shadow: inset 0 0 12px rgba(255, 220, 150, 0.08), inset 0 0 24px rgba(255, 120, 0, 0.08) !important; } /* HOVER */ .nav-link:hover { transform: translateY(-2px) scale(1.018) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 235, 150, 0.25), transparent 45%), linear-gradient(180deg, #4a170b 0%, #230908 48%, #0a0304 100%) !important; border-color: rgba(255, 235, 160, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -4px 10px rgba(0, 0, 0, 0.48), inset 0 0 22px rgba(255, 180, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.92), 0 12px 26px rgba(0, 0, 0, 0.78), 0 0 30px rgba(255, 185, 60, 0.42) !important; } /* NÚT CHÍNH - ĐỎ VÀNG CỔ ĐIỂN */ .nav-link-primary { background: radial-gradient(circle at 50% 0%, rgba(255, 245, 180, 0.28), transparent 42%), linear-gradient(180deg, #8a2c12 0%, #5a140c 45%, #230606 100%) !important; border: 1px solid rgba(255, 230, 150, 0.95) !important; color: #fff3c4 !important; font-weight: 1000 !important; text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 210, 90, 0.55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -4px 12px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(255, 210, 90, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.92), 0 10px 22px rgba(60, 10, 5, 0.65), 0 0 26px rgba(255, 170, 40, 0.45) !important; } /* HOA VĂN RIÊNG CHO NÚT CHÍNH */ .nav-link-primary::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; background: radial-gradient(circle at 13% 50%, rgba(255, 235, 160, 0.38) 0 2px, transparent 3px), radial-gradient(circle at 87% 50%, rgba(255, 235, 160, 0.38) 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, rgba(255, 230, 160, 0.16) 0 17%, transparent 18%), linear-gradient(45deg, transparent 43%, rgba(255, 230, 160, 0.12) 48%, transparent 53%), linear-gradient(-45deg, transparent 43%, rgba(255, 230, 160, 0.12) 48%, transparent 53%), repeating-linear-gradient( 90deg, transparent 0 18px, rgba(255, 215, 120, 0.09) 18px 19px, transparent 19px 36px ); opacity: 0.9 !important; } .nav-link-primary:hover { background: radial-gradient(circle at 50% 0%, rgba(255, 245, 180, 0.35), transparent 42%), linear-gradient(180deg, #a53915 0%, #6d180d 45%, #2a0706 100%) !important; transform: translateY(-2px) scale(1.025) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -4px 12px rgba(0, 0, 0, 0.38), inset 0 0 24px rgba(255, 210, 90, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.92), 0 14px 30px rgba(70, 12, 6, 0.7), 0 0 36px rgba(255, 190, 70, 0.62) !important; } /* ICON */ .nav-link span.icon { width: 24px !important; min-width: 24px !important; text-align: center !important; font-size: 17px !important; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 8px rgba(255, 180, 60, 0.55)) !important; } /* CHỮ */ .nav-link .nav-text, .nav-link .nav-text1, .nav-link > span:not(.icon) { position: relative !important; z-index: 2 !important; font-size: 16px !important; font-weight: 1000 !important; line-height: 1.1 !important; letter-spacing: 0.6px !important; } .nav-link .nav-text { font-size: 17px !important; } .nav-link .nav-text1 { font-size: 16px !important; } /* ===================================== */ /* CHỈ RIÊNG Ô TẢI GAME */ /* ===================================== */ .sidebar-nav a[data-modal-target="#downloadModal"] { min-height: 68px !important; border-radius: 22px !important; background: radial-gradient(circle at 50% 0%, rgba(255, 245, 190, 0.45), transparent 42%), linear-gradient(180deg, #c44618 0%, #7a1c0e 45%, #280605 100%) !important; border: 2px solid rgba(255, 238, 170, 1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -5px 14px rgba(0, 0, 0, 0.48), inset 0 0 22px rgba(255, 220, 120, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.95), 0 12px 26px rgba(60, 10, 5, 0.76), 0 0 28px rgba(255, 190, 70, 0.68), 0 0 48px rgba(255, 120, 20, 0.42) !important; animation: taiGameOnlyPulse 1.25s ease-in-out infinite !important; } /* chữ TẢI GAME */ .sidebar-nav a[data-modal-target="#downloadModal"] .nav-text { font-size: 24px !important; color: #fff8d8 !important; letter-spacing: 1.4px !important; text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 255, 255, 0.8), 0 0 14px rgba(255, 220, 110, 1), 0 0 30px rgba(255, 120, 20, 0.9) !important; } /* icon tải game */ .sidebar-nav a[data-modal-target="#downloadModal"] span.icon { font-size: 25px !important; width: 34px !important; min-width: 34px !important; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 12px rgba(255, 210, 90, 1)) drop-shadow(0 0 22px rgba(255, 120, 20, 0.85)) !important; animation: taiGameOnlyIcon 0.95s ease-in-out infinite !important; } /* ánh sáng quét riêng trong ô tải game */ .sidebar-nav a[data-modal-target="#downloadModal"]::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient( 115deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.38) 48%, rgba(255, 230, 140, 0.25) 54%, transparent 68%, transparent 100% ) !important; transform: translateX(-120%) !important; animation: taiGameOnlyShine 2.2s ease-in-out infinite !important; } /* viền trong */ .sidebar-nav a[data-modal-target="#downloadModal"]::after { content: "" !important; position: absolute !important; inset: 5px !important; border-radius: 16px !important; pointer-events: none !important; border: 1px solid rgba(255, 245, 190, 0.62) !important; box-shadow: inset 0 0 14px rgba(255, 230, 150, 0.18), 0 0 14px rgba(255, 220, 120, 0.24) !important; } .sidebar-nav a[data-modal-target="#downloadModal"]:hover { transform: translateY(-3px) scale(1.045) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 250, 210, 0.56), transparent 42%), linear-gradient(180deg, #df501d 0%, #90210f 45%, #330706 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -5px 14px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.95), 0 15px 32px rgba(70, 12, 6, 0.82), 0 0 38px rgba(255, 210, 90, 0.86), 0 0 62px rgba(255, 120, 20, 0.58) !important; } @keyframes taiGameOnlyPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } @keyframes taiGameOnlyIcon { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.14); } } @keyframes taiGameOnlyShine { 0% { transform: translateX(-120%); } 55% { transform: translateX(120%); } 100% { transform: translateX(120%); } } /* ===================================== */ /* GUIDE MODAL - CUỘN ĐÚNG KHU VỰC NỘI DUNG */ /* ===================================== */ #guideModal .modal-content { max-height: 90vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* Header đứng yên */ #guideModal .modal-header { flex: 0 0 auto !important; } /* Footer đứng yên */ #guideModal .modal-footer { flex: 0 0 auto !important; } /* CHỈ PHẦN NỘI DUNG Ở GIỮA ĐƯỢC CUỘN */ #guideModal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(90vh - 120px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 12px !important; } /* Danh sách bên trong không tự tạo cuộn nữa */ #guideModal .download-links { max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin-right: 0 !important; } /* Các hàng giữ thẳng nhau */ #guideModal .download-link { width: 100% !important; box-sizing: border-box !important; margin-right: 0 !important; } /* Thanh cuộn vàng */ #guideModal .modal-body::-webkit-scrollbar { width: 8px !important; } #guideModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.75) !important; border-radius: 999px !important; } #guideModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fff176, #ffc107, #ff9800) !important; border-radius: 999px !important; box-shadow: 0 0 12px rgba(255, 193, 7, 0.9) !important; } /* NÚT ĐUA TOP MỞ NHANH - KHÔNG DÙNG LINK */ .nav-btn-fast { width: 100% !important; font-family: inherit !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; text-align: left !important; } .nav-btn-fast:focus { outline: none !important; } .nav-btn-fast:active { transform: scale(0.98) !important; } /* ===================================== */ /* PLAY GUIDE MODAL - GIỐNG HƯỚNG DẪN TÂN THỦ */ /* ===================================== */ #playGuideModal .modal-content { max-height: 90vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #playGuideModal .modal-header { flex: 0 0 auto !important; } #playGuideModal .modal-footer { flex: 0 0 auto !important; } #playGuideModal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(90vh - 120px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 12px !important; } #playGuideModal .download-links { max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin-right: 0 !important; } #playGuideModal .download-link { width: 100% !important; box-sizing: border-box !important; margin-right: 0 !important; } #playGuideModal .modal-body::-webkit-scrollbar { width: 8px !important; } #playGuideModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.75) !important; border-radius: 999px !important; } #playGuideModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fff176, #ffc107, #ff9800) !important; border-radius: 999px !important; box-shadow: 0 0 12px rgba(255, 193, 7, 0.9) !important; } /* =============================== */ /* MODAL CÔNG THỨC CHẾ TẠO - BẢNG TO RỘNG, 2 CỘT ĐỀU */ /* =============================== */ #playGuideModal .modal-craft-wide { width: 97vw !important; max-width: 1680px !important; min-width: 1250px !important; max-height: 96vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #playGuideModal .modal-header, #playGuideModal .modal-footer { flex: 0 0 auto !important; } #playGuideModal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 10px !important; } #playGuideModal .craft-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; align-items: start !important; } #playGuideModal .craft-column { min-width: 0 !important; width: 100% !important; } #playGuideModal .download-group-title { min-height: 42px !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; font-size: 16px !important; line-height: 1.2 !important; margin-bottom: 10px !important; } #playGuideModal .download-links { display: grid !important; grid-template-rows: repeat(4, 72px) !important; gap: 10px !important; } #playGuideModal .download-link { height: 72px !important; min-height: 72px !important; max-height: 72px !important; display: grid !important; grid-template-columns: 40% 60% !important; align-items: center !important; gap: 14px !important; padding: 10px 14px !important; box-sizing: border-box !important; overflow: hidden !important; } #playGuideModal .download-link div { width: 100% !important; max-width: none !important; min-width: 0 !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.25 !important; white-space: normal !important; overflow-wrap: break-word !important; } #playGuideModal .download-link span { width: 100% !important; max-width: none !important; min-width: 0 !important; display: block !important; text-align: right !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: normal !important; overflow-wrap: break-word !important; } #playGuideModal .craft-note { min-height: 70px !important; margin: 12px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #fff6d8 !important; opacity: 0.94 !important; } #playGuideModal .modal-footer { padding-top: 10px !important; } #playGuideModal .modal-body::-webkit-scrollbar { width: 8px !important; } #playGuideModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.75) !important; border-radius: 999px !important; } #playGuideModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fff176, #ffc107, #ff9800) !important; border-radius: 999px !important; box-shadow: 0 0 12px rgba(255, 193, 7, 0.9) !important; } @media (max-width: 1250px) { #playGuideModal .modal-craft-wide { width: 96vw !important; min-width: 0 !important; max-width: 96vw !important; } #playGuideModal .craft-grid-2 { grid-template-columns: 1fr !important; } #playGuideModal .download-links { grid-template-rows: none !important; } #playGuideModal .download-link { height: auto !important; min-height: 68px !important; max-height: none !important; grid-template-columns: 1fr !important; gap: 5px !important; } #playGuideModal .download-link span { text-align: left !important; } } /* =============================== */ /* FIX CHỮ CÁCH LỀ TRONG BẢNG CÔNG THỨC */ /* =============================== */ html body #playGuideModal .download-link { height: 82px !important; min-height: 82px !important; max-height: 82px !important; display: grid !important; grid-template-columns: 42% 58% !important; align-items: center !important; gap: 16px !important; padding: 14px 20px !important; /* tăng khoảng cách với viền */ box-sizing: border-box !important; overflow: hidden !important; } html body #playGuideModal .download-link div { width: 100% !important; min-width: 0 !important; max-width: none !important; padding-left: 6px !important; /* cách viền trái thêm */ padding-right: 8px !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; } html body #playGuideModal .download-link span { width: 100% !important; min-width: 0 !important; max-width: none !important; padding-left: 8px !important; padding-right: 8px !important; /* cách viền phải thêm */ display: block !important; text-align: right !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; } html body #playGuideModal .craft-note { padding-left: 6px !important; padding-right: 10px !important; margin-top: 12px !important; line-height: 1.5 !important; } /* =============================== */ /* TĂNG KHOẢNG CÁCH GIỮA CÁC KHUNG */ /* =============================== */ html body #playGuideModal .craft-grid-2 { gap: 36px !important; /* khoảng cách giữa 2 cột trái/phải */ } html body #playGuideModal .download-links { display: grid !important; grid-template-rows: repeat(4, 82px) !important; gap: 16px !important; /* khoảng cách giữa các khung */ margin-top: 14px !important; } html body #playGuideModal .download-link { height: 82px !important; min-height: 82px !important; max-height: 82px !important; } /* =============================== */ /* THANH TÌM KIẾM CÔNG THỨC CHẾ TẠO */ /* =============================== */ html body #playGuideModal .craft-search-box { position: sticky !important; top: 0 !important; z-index: 20 !important; display: grid !important; grid-template-columns: 42px 1fr auto !important; align-items: center !important; gap: 10px !important; margin: 0 0 16px 0 !important; padding: 10px 12px !important; border-radius: 18px !important; border: 1px solid rgba(255, 220, 100, 0.9) !important; background: radial-gradient(circle at top left, rgba(255, 210, 90, 0.18), transparent 45%), linear-gradient(180deg, rgba(12, 10, 2, 0.98), rgba(0, 0, 0, 0.96)) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 190, 40, 0.25), inset 0 0 18px rgba(255, 220, 120, 0.06) !important; } html body #playGuideModal .craft-search-icon { width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.75) !important; border: 1px solid rgba(255, 220, 100, 0.75) !important; font-size: 17px !important; box-shadow: 0 0 12px rgba(255, 200, 60, 0.35) !important; } html body #playGuideModal #craftSearchInput { width: 100% !important; height: 38px !important; border: none !important; outline: none !important; border-radius: 999px !important; padding: 0 16px !important; background: rgba(0, 0, 0, 0.82) !important; color: #fff8d8 !important; font-size: 14px !important; font-weight: 800 !important; box-shadow: inset 0 0 0 1px rgba(255, 220, 120, 0.45), inset 0 0 14px rgba(255, 190, 60, 0.08) !important; } html body #playGuideModal #craftSearchInput::placeholder { color: rgba(255, 240, 190, 0.62) !important; } html body #playGuideModal #craftSearchClear { height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; border: 1px solid rgba(255, 220, 100, 0.85) !important; background: linear-gradient(135deg, #ffcc33, #ff8c00) !important; color: #1b1200 !important; font-size: 13px !important; font-weight: 1000 !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 8px 18px rgba(255, 140, 0, 0.35) !important; } html body #playGuideModal #craftSearchClear:hover { filter: brightness(1.12) !important; transform: translateY(-1px) !important; } html body #playGuideModal .craft-no-result { display: none; margin: 12px 0 18px !important; padding: 14px 18px !important; border-radius: 16px !important; border: 1px solid rgba(255, 90, 90, 0.75) !important; background: rgba(40, 0, 0, 0.72) !important; color: #ffd6d6 !important; font-size: 14px !important; font-weight: 900 !important; text-align: center !important; box-shadow: 0 0 18px rgba(255, 0, 0, 0.18) !important; } html body #playGuideModal .craft-hidden { display: none !important; } /* =============================== */ /* MODAL MỤC MỚI - GIỐNG CÔNG THỨC */ /* =============================== */ #newMenuModal .modal-content { max-height: 90vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #newMenuModal .modal-craft-wide { width: 97vw !important; max-width: 1680px !important; min-width: 1250px !important; max-height: 96vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #newMenuModal .modal-header, #newMenuModal .modal-footer { flex: 0 0 auto !important; } #newMenuModal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(90vh - 120px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 12px !important; } #newMenuModal .craft-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px !important; align-items: start !important; } #newMenuModal .craft-column { min-width: 0 !important; width: 100% !important; } #newMenuModal .download-group-title { min-height: 42px !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; font-size: 16px !important; line-height: 1.2 !important; margin-bottom: 10px !important; } #newMenuModal .download-links { display: grid !important; grid-template-rows: repeat(4, 82px) !important; gap: 16px !important; margin-top: 14px !important; } #newMenuModal .download-link { height: 82px !important; min-height: 82px !important; max-height: 82px !important; display: grid !important; grid-template-columns: 42% 58% !important; align-items: center !important; gap: 16px !important; padding: 14px 20px !important; box-sizing: border-box !important; overflow: hidden !important; } #newMenuModal .download-link div { width: 100% !important; min-width: 0 !important; max-width: none !important; padding-left: 6px !important; padding-right: 8px !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; } #newMenuModal .download-link span { width: 100% !important; min-width: 0 !important; max-width: none !important; padding-left: 8px !important; padding-right: 8px !important; display: block !important; text-align: right !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; } #newMenuModal .craft-search-box { position: sticky !important; top: 0 !important; z-index: 20 !important; display: grid !important; grid-template-columns: 42px 1fr auto !important; align-items: center !important; gap: 10px !important; margin: 0 0 16px 0 !important; padding: 10px 12px !important; border-radius: 18px !important; border: 1px solid rgba(255, 220, 100, 0.9) !important; background: radial-gradient(circle at top left, rgba(255, 210, 90, 0.18), transparent 45%), linear-gradient(180deg, rgba(12, 10, 2, 0.98), rgba(0, 0, 0, 0.96)) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 190, 40, 0.25), inset 0 0 18px rgba(255, 220, 120, 0.06) !important; } #newMenuModal .craft-search-icon { width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.72) !important; border: 1px solid rgba(255, 220, 100, 0.75) !important; } #newMenuModal .craft-search-box input { width: 100% !important; height: 38px !important; border-radius: 999px !important; border: 1px solid rgba(255, 220, 100, 0.75) !important; background: rgba(0, 0, 0, 0.72) !important; color: #fff7d6 !important; padding: 0 14px !important; outline: none !important; font-size: 14px !important; font-weight: 800 !important; } #newMenuModal .craft-search-box input::placeholder { color: rgba(255, 235, 180, 0.68) !important; } #newMenuModal .craft-search-box button { height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; border: 1px solid rgba(255, 220, 100, 0.85) !important; background: linear-gradient(180deg, #ffcc33, #ff9800) !important; color: #1a0d00 !important; font-size: 13px !important; font-weight: 1000 !important; cursor: pointer !important; } #newMenuModal .craft-no-result { display: none; margin: 10px 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 80, 80, 0.75); background: rgba(60, 0, 0, 0.78); color: #ffd6d6; font-size: 14px; font-weight: 900; text-align: center; } #newMenuModal .craft-hidden { display: none !important; } #newMenuModal .modal-body::-webkit-scrollbar { width: 8px !important; } #newMenuModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.75) !important; border-radius: 999px !important; } #newMenuModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fff176, #ffc107, #ff9800) !important; border-radius: 999px !important; box-shadow: 0 0 12px rgba(255, 193, 7, 0.9) !important; } @media (max-width: 1250px) { #newMenuModal .modal-craft-wide { width: 96vw !important; min-width: 0 !important; max-width: 96vw !important; } #newMenuModal .craft-grid-2 { grid-template-columns: 1fr !important; } #newMenuModal .download-links { grid-template-rows: none !important; } #newMenuModal .download-link { height: auto !important; min-height: 68px !important; max-height: none !important; grid-template-columns: 1fr !important; gap: 5px !important; } #newMenuModal .download-link span { text-align: left !important; } } html { } body { transform-origin: top center !important; } /* KHÓA TRANG NGOÀI KHI MỞ MODAL */ body.modal-open { overflow: hidden !important; height: 100vh !important; } /* CHỈ CHO LĂN BÊN TRONG BẢNG CÔNG THỨC */ #playGuideModal .modal-body { overscroll-behavior: contain !important; } /* CHỈ CHO LĂN BÊN TRONG MỤC MỚI NẾU CÓ */ #newMenuModal .modal-body { overscroll-behavior: contain !important; } /* =============================== */ /* ĐỔI MÀU RIÊNG CHO THÔNG TIN NPC */ /* =============================== */ #newMenuModal { background: radial-gradient(circle at top, rgba(10, 20, 45, 0.92), rgba(0, 0, 0, 0.94)) !important; } #newMenuModal .modal-content { border: 1px solid rgba(90, 180, 255, 0.85) !important; background: radial-gradient(circle at top left, rgba(0, 180, 255, 0.16), transparent 35%), radial-gradient(circle at bottom right, rgba(140, 82, 255, 0.14), transparent 40%), linear-gradient(135deg, rgba(5, 12, 28, 0.98), rgba(3, 6, 18, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 26px 60px rgba(0, 0, 0, 0.98), 0 0 28px rgba(0, 170, 255, 0.30), 0 0 40px rgba(140, 82, 255, 0.18) !important; } /* tiêu đề */ #newMenuModal .modal-title { color: #dff6ff !important; text-shadow: 0 0 6px rgba(0, 180, 255, 0.85), 0 0 16px rgba(140, 82, 255, 0.55) !important; } /* nút X */ #newMenuModal .modal-close { border: 1px solid rgba(90, 180, 255, 0.85) !important; color: #8fd3ff !important; background: rgba(0, 0, 0, 0.72) !important; box-shadow: 0 0 12px rgba(0, 170, 255, 0.22) !important; } #newMenuModal .modal-close:hover { background: rgba(0, 170, 255, 0.12) !important; box-shadow: 0 0 16px rgba(0, 170, 255, 0.45) !important; } /* khung tìm kiếm */ #newMenuModal .craft-search-box { border: 1px solid rgba(90, 180, 255, 0.85) !important; background: radial-gradient(circle at top left, rgba(0, 170, 255, 0.16), transparent 45%), linear-gradient(180deg, rgba(5, 10, 24, 0.96), rgba(0, 0, 0, 0.94)) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.82), 0 0 18px rgba(0, 170, 255, 0.18), inset 0 0 18px rgba(120, 210, 255, 0.06) !important; } #newMenuModal .craft-search-icon { border: 1px solid rgba(90, 180, 255, 0.8) !important; background: rgba(0, 0, 0, 0.7) !important; box-shadow: 0 0 12px rgba(0, 170, 255, 0.18) !important; } #newMenuModal .craft-search-box input { border: 1px solid rgba(90, 180, 255, 0.75) !important; background: rgba(3, 8, 20, 0.82) !important; color: #eaf8ff !important; box-shadow: inset 0 0 12px rgba(0, 170, 255, 0.08) !important; } #newMenuModal .craft-search-box input::placeholder { color: rgba(180, 225, 255, 0.72) !important; } /* nút xóa */ #newMenuModal .craft-search-box button { border: 1px solid rgba(110, 220, 255, 0.95) !important; background: linear-gradient(180deg, #40c4ff, #2979ff) !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(0, 170, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } #newMenuModal .craft-search-box button:hover { background: linear-gradient(180deg, #80d8ff, #448aff) !important; } /* tiêu đề nhóm */ #newMenuModal .download-group-title { color: #aee8ff !important; text-shadow: 0 0 6px rgba(0, 180, 255, 0.75), 0 0 14px rgba(140, 82, 255, 0.35) !important; } /* ô nội dung */ #newMenuModal .download-link { border: 1px solid rgba(90, 180, 255, 0.75) !important; background: linear-gradient(180deg, rgba(3, 8, 20, 0.96), rgba(0, 0, 0, 0.96)) !important; box-shadow: inset 0 0 14px rgba(0, 170, 255, 0.05), 0 0 12px rgba(0, 170, 255, 0.08) !important; } #newMenuModal .download-link:hover { transform: translateY(-1px) !important; border-color: rgba(110, 220, 255, 0.95) !important; background: linear-gradient(180deg, rgba(6, 18, 38, 0.98), rgba(2, 8, 20, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 170, 255, 0.30), 0 0 20px rgba(0, 170, 255, 0.18), 0 0 24px rgba(140, 82, 255, 0.10) !important; } #newMenuModal .download-link div { color: #e8f8ff !important; } #newMenuModal .download-link span { color: #bfeaff !important; } /* badge new */ #newMenuModal .badge-new { background: rgba(4, 12, 28, 0.92) !important; border: 1px solid rgba(90, 180, 255, 0.85) !important; color: #7fd9ff !important; text-shadow: 0 0 8px rgba(0, 170, 255, 0.7) !important; } /* ghi chú cuối */ #newMenuModal .craft-note, #newMenuModal .modal-body p { color: #d3f0ff !important; } /* nút đóng */ #newMenuModal .btn-ghost { border: 1px solid rgba(90, 180, 255, 0.85) !important; background: rgba(0, 0, 0, 0.75) !important; color: #dff6ff !important; } #newMenuModal .btn-ghost:hover { background: rgba(0, 170, 255, 0.12) !important; box-shadow: 0 0 14px rgba(0, 170, 255, 0.25) !important; } /* thanh cuộn */ #newMenuModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #80d8ff, #40c4ff, #2979ff) !important; box-shadow: 0 0 12px rgba(0, 170, 255, 0.75) !important; } #newMenuModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.65) !important; } /* =============================== */ /* RIÊNG MODAL TẢI GAME */ /* ĐỔI MÀU KHUNG #downloadModal */ /* =============================== */ #downloadModal { background: radial-gradient(circle at top, rgba(8, 16, 40, 0.95), rgba(0, 0, 0, 0.94)) !important; } #downloadModal .modal-content { border: 1px solid rgba(90, 180, 255, 0.9) !important; background: radial-gradient(circle at top left, rgba(0, 170, 255, 0.14), transparent 38%), radial-gradient(circle at bottom right, rgba(160, 90, 255, 0.14), transparent 42%), linear-gradient(135deg, rgba(6, 12, 30, 0.98), rgba(2, 5, 18, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 26px 60px rgba(0, 0, 0, 0.98), 0 0 28px rgba(0, 170, 255, 0.26), 0 0 38px rgba(160, 90, 255, 0.18) !important; color: #eef8ff !important; } #downloadModal .modal-title { color: #e6f7ff !important; text-shadow: 0 0 6px rgba(0, 170, 255, 0.85), 0 0 16px rgba(160, 90, 255, 0.45), 0 0 2px #000 !important; } #downloadModal .modal-close { border: 1px solid rgba(90, 180, 255, 0.9) !important; color: #9ed8ff !important; background: rgba(0, 0, 0, 0.72) !important; box-shadow: 0 0 12px rgba(0, 170, 255, 0.22) !important; } #downloadModal .modal-close:hover { background: rgba(0, 170, 255, 0.12) !important; box-shadow: 0 0 16px rgba(0, 170, 255, 0.4) !important; } #downloadModal .download-group-title { color: #bde9ff !important; text-shadow: 0 0 6px rgba(0, 170, 255, 0.7), 0 0 12px rgba(160, 90, 255, 0.35) !important; } #downloadModal .badge-new { background: rgba(4, 12, 28, 0.92) !important; border: 1px solid rgba(90, 180, 255, 0.85) !important; color: #7fd9ff !important; text-shadow: 0 0 8px rgba(0, 170, 255, 0.7) !important; } #downloadModal .download-link { border: 1px solid rgba(90, 180, 255, 0.78) !important; background: linear-gradient(180deg, rgba(3, 8, 20, 0.96), rgba(0, 0, 0, 0.96)) !important; color: #eef8ff !important; box-shadow: inset 0 0 14px rgba(0, 170, 255, 0.05), 0 0 12px rgba(0, 170, 255, 0.08) !important; } #downloadModal .download-link:hover { background: linear-gradient(180deg, rgba(8, 18, 40, 0.98), rgba(2, 8, 20, 0.98)) !important; border-color: rgba(120, 220, 255, 0.98) !important; box-shadow: 0 0 0 1px rgba(0, 170, 255, 0.25), 0 0 18px rgba(0, 170, 255, 0.16), 0 0 24px rgba(160, 90, 255, 0.10) !important; } #downloadModal .download-link div { color: #eaf8ff !important; } #downloadModal .download-link span { color: #bfeaff !important; } #downloadModal .modal-body p { color: #d8f1ff !important; } #downloadModal .btn-ghost { border: 1px solid rgba(90, 180, 255, 0.85) !important; background: rgba(0, 0, 0, 0.76) !important; color: #e6f7ff !important; } #downloadModal .btn-ghost:hover { background: rgba(0, 170, 255, 0.12) !important; box-shadow: 0 0 14px rgba(0, 170, 255, 0.24) !important; } /* =============================== */ /* RIÊNG MODAL HƯỚNG DẪN TÂN THỦ */ /* ĐỔI MÀU KHUNG #guideModal */ /* =============================== */ #guideModal { background: radial-gradient(circle at top, rgba(8, 30, 22, 0.95), rgba(0, 0, 0, 0.94)) !important; } #guideModal .modal-content { border: 1px solid rgba(90, 255, 180, 0.88) !important; background: radial-gradient(circle at top left, rgba(0, 255, 170, 0.14), transparent 38%), radial-gradient(circle at bottom right, rgba(60, 220, 140, 0.14), transparent 42%), linear-gradient(135deg, rgba(4, 22, 18, 0.98), rgba(2, 10, 8, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 26px 60px rgba(0, 0, 0, 0.98), 0 0 28px rgba(0, 255, 170, 0.22), 0 0 38px rgba(80, 255, 180, 0.16) !important; color: #effff8 !important; } #guideModal .modal-title { color: #e9fff5 !important; text-shadow: 0 0 6px rgba(0, 255, 170, 0.75), 0 0 14px rgba(80, 255, 180, 0.35), 0 0 2px #000 !important; } #guideModal .modal-close { border: 1px solid rgba(90, 255, 180, 0.9) !important; color: #9cffd6 !important; background: rgba(0, 0, 0, 0.72) !important; box-shadow: 0 0 12px rgba(0, 255, 170, 0.18) !important; } #guideModal .modal-close:hover { background: rgba(0, 255, 170, 0.12) !important; box-shadow: 0 0 16px rgba(0, 255, 170, 0.35) !important; } #guideModal .download-group-title { color: #caffea !important; text-shadow: 0 0 6px rgba(0, 255, 170, 0.6), 0 0 12px rgba(80, 255, 180, 0.28) !important; } #guideModal .badge-new { background: rgba(4, 20, 16, 0.92) !important; border: 1px solid rgba(90, 255, 180, 0.85) !important; color: #8effd1 !important; text-shadow: 0 0 8px rgba(0, 255, 170, 0.65) !important; } #guideModal .download-link { border: 1px solid rgba(90, 255, 180, 0.72) !important; background: linear-gradient(180deg, rgba(3, 16, 12, 0.96), rgba(0, 0, 0, 0.96)) !important; color: #effff8 !important; box-shadow: inset 0 0 14px rgba(0, 255, 170, 0.05), 0 0 12px rgba(0, 255, 170, 0.07) !important; } #guideModal .download-link:hover { background: linear-gradient(180deg, rgba(8, 28, 22, 0.98), rgba(2, 10, 8, 0.98)) !important; border-color: rgba(130, 255, 210, 0.96) !important; box-shadow: 0 0 0 1px rgba(0, 255, 170, 0.22), 0 0 18px rgba(0, 255, 170, 0.14), 0 0 24px rgba(130, 255, 210, 0.08) !important; } #guideModal .download-link div { color: #effff8 !important; } #guideModal .download-link span { color: #c9ffe7 !important; } #guideModal .modal-body p { color: #dcfff1 !important; } #guideModal .btn-ghost { border: 1px solid rgba(90, 255, 180, 0.84) !important; background: rgba(0, 0, 0, 0.78) !important; color: #effff8 !important; } #guideModal .btn-ghost:hover { background: rgba(0, 255, 170, 0.12) !important; box-shadow: 0 0 14px rgba(0, 255, 170, 0.2) !important; } /* ================================================= */ /* LIÊN HỆ ADMIN - KHUNG VIP HOÀNH TRÁNG CHUYỂN ĐỘNG */ /* ================================================= */ #contactModal { background: radial-gradient(circle at top, rgba(40, 0, 60, 0.55), transparent 45%), radial-gradient(circle at bottom, rgba(0, 140, 255, 0.28), transparent 55%), rgba(0, 0, 0, 0.94) !important; } /* KHUNG CHÍNH */ #contactModal .modal-content { position: relative !important; overflow: hidden !important; border: 2px solid transparent !important; background: linear-gradient(#07020f, #020006) padding-box, linear-gradient( 120deg, #ff0080, #ffd700, #00e5ff, #7c4dff, #ff0080 ) border-box !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 0, 128, 0.45), 0 0 36px rgba(0, 229, 255, 0.32), 0 0 58px rgba(255, 215, 0, 0.22), 0 28px 70px rgba(0, 0, 0, 1) !important; animation: contactFrameGlow 2.2s ease-in-out infinite, contactBorderHue 4s linear infinite !important; } /* ÁNH SÁNG QUÉT TRONG KHUNG */ #contactModal .modal-content::before { content: "" !important; position: absolute !important; inset: -60% !important; z-index: 0 !important; background: conic-gradient( from 0deg, transparent, rgba(255, 0, 128, 0.22), transparent, rgba(0, 229, 255, 0.22), transparent, rgba(255, 215, 0, 0.20), transparent ) !important; animation: contactSpinLight 5s linear infinite !important; pointer-events: none !important; } /* LỚP ÁNH SÁNG LƯỚT NGANG */ #contactModal .modal-content::after { content: "" !important; position: absolute !important; top: -20% !important; left: -80% !important; width: 60% !important; height: 140% !important; z-index: 1 !important; background: linear-gradient( 115deg, transparent, rgba(255, 255, 255, 0.18), transparent ) !important; transform: rotate(8deg) !important; animation: contactShineMove 2.8s ease-in-out infinite !important; pointer-events: none !important; } /* ĐẨY NỘI DUNG LÊN TRÊN HIỆU ỨNG */ #contactModal .modal-header, #contactModal .modal-body, #contactModal .modal-footer { position: relative !important; z-index: 3 !important; } /* TIÊU ĐỀ */ #contactModal .modal-title { color: #ffffff !important; font-weight: 1000 !important; letter-spacing: 1px !important; text-shadow: 0 0 4px #000, 0 0 8px #ff00cc, 0 0 16px #ff00cc, 0 0 26px #00e5ff, 0 0 38px #ffd700 !important; animation: contactTitleBlink 1.15s ease-in-out infinite !important; } /* NÚT X */ #contactModal .modal-close { border: 1px solid #ffe66d !important; color: #fff7b0 !important; background: rgba(0, 0, 0, 0.75) !important; box-shadow: 0 0 8px #ff00cc, 0 0 16px rgba(0, 229, 255, 0.55) !important; animation: contactButtonPulse 1.4s ease-in-out infinite !important; } #contactModal .modal-close:hover { background: rgba(255, 0, 128, 0.18) !important; transform: scale(1.12) rotate(8deg) !important; } /* TIÊU ĐỀ NHÓM */ #contactModal .download-group-title { color: #fff0a8 !important; font-weight: 1000 !important; text-shadow: 0 0 4px #000, 0 0 8px #ffd700, 0 0 16px #ff00cc, 0 0 24px #00e5ff !important; animation: contactGroupBlink 1.4s ease-in-out infinite !important; } /* BADGE */ #contactModal .badge-new { border: 1px solid #00e5ff !important; background: rgba(0, 0, 0, 0.86) !important; color: #9ff6ff !important; box-shadow: 0 0 8px rgba(0, 229, 255, 0.65), 0 0 14px rgba(255, 0, 128, 0.35) !important; animation: contactBadgeColor 1.8s linear infinite !important; } /* CÁC Ô LINK */ #contactModal .download-link { position: relative !important; overflow: hidden !important; border: 1px solid rgba(255, 230, 110, 0.88) !important; background: radial-gradient(circle at top left, rgba(255, 0, 128, 0.12), transparent 42%), linear-gradient(180deg, rgba(8, 2, 18, 0.98), rgba(0, 0, 0, 0.98)) !important; color: #ffffff !important; box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.04), 0 0 10px rgba(255, 0, 128, 0.20), 0 0 18px rgba(0, 229, 255, 0.12) !important; transition: 0.2s ease !important; } /* VIỀN SÁNG CHẠY TRONG Ô */ #contactModal .download-link::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.20) 35%, transparent 65% ) !important; transform: translateX(-130%) !important; animation: contactLinkShine 2.3s ease-in-out infinite !important; pointer-events: none !important; } #contactModal .download-link:hover { transform: translateY(-2px) scale(1.015) !important; border-color: #00e5ff !important; background: radial-gradient(circle at top left, rgba(0, 229, 255, 0.18), transparent 42%), linear-gradient(180deg, rgba(16, 4, 30, 0.98), rgba(2, 0, 8, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.40), 0 0 22px rgba(0, 229, 255, 0.35), 0 0 30px rgba(255, 0, 128, 0.28) !important; } /* CHỮ TRONG Ô */ #contactModal .download-link div { color: #ffffff !important; font-weight: 1000 !important; text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 0, 128, 0.75), 0 0 14px rgba(0, 229, 255, 0.45) !important; animation: contactTextGlow 1.6s ease-in-out infinite !important; } #contactModal .download-link span { color: #fff4c4 !important; font-weight: 900 !important; text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 215, 0, 0.55) !important; } /* ĐOẠN GHI CHÚ */ #contactModal .modal-body p { color: #fff7df !important; font-weight: 700 !important; text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 215, 0, 0.45) !important; } /* NÚT ĐÓNG */ #contactModal .btn-ghost { border: 1px solid #ffe66d !important; color: #fff7bd !important; background: rgba(0, 0, 0, 0.78) !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.35), 0 0 18px rgba(255, 0, 128, 0.18) !important; animation: contactButtonPulse 1.5s ease-in-out infinite !important; } #contactModal .btn-ghost:hover { background: rgba(255, 0, 128, 0.18) !important; box-shadow: 0 0 18px rgba(255, 0, 128, 0.55), 0 0 24px rgba(0, 229, 255, 0.35) !important; } /* ================= */ /* KEYFRAMES LIÊN HỆ */ /* ================= */ @keyframes contactFrameGlow { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 0, 128, 0.38), 0 0 34px rgba(0, 229, 255, 0.25), 0 0 52px rgba(255, 215, 0, 0.18), 0 28px 70px rgba(0, 0, 0, 1); } 50% { filter: brightness(1.22); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 28px rgba(255, 0, 128, 0.65), 0 0 46px rgba(0, 229, 255, 0.48), 0 0 72px rgba(255, 215, 0, 0.35), 0 28px 70px rgba(0, 0, 0, 1); } } @keyframes contactBorderHue { 0% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(60deg) brightness(1.18); } 100% { filter: hue-rotate(0deg) brightness(1); } } @keyframes contactSpinLight { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes contactShineMove { 0% { left: -80%; opacity: 0; } 35% { opacity: 0.75; } 70% { left: 125%; opacity: 0; } 100% { left: 125%; opacity: 0; } } @keyframes contactTitleBlink { 0%, 100% { opacity: 0.82; transform: scale(1); filter: brightness(1); } 50% { opacity: 1; transform: scale(1.018); filter: brightness(1.75); } } @keyframes contactGroupBlink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.8); } } @keyframes contactBadgeColor { 0% { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; } 33% { color: #ffd700; text-shadow: 0 0 8px #ffd700; } 66% { color: #ff4fd8; text-shadow: 0 0 8px #ff4fd8; } 100% { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; } } @keyframes contactLinkShine { 0% { transform: translateX(-130%); } 45% { transform: translateX(130%); } 100% { transform: translateX(130%); } } @keyframes contactTextGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.55); } } @keyframes contactButtonPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.45); } } /* ========================================= */ /* NÚT TẢI GAME VIP - HIỆU ỨNG CHUYỂN ĐỘNG */ /* ========================================= */ .sidebar-nav a[data-modal-target="#downloadModal"] { position: relative !important; overflow: hidden !important; min-height: 62px !important; border-radius: 20px !important; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.28), transparent 28%), radial-gradient(circle at 80% 80%, rgba(255, 0, 80, 0.28), transparent 35%), linear-gradient(135deg, #ffdf65 0%, #ff9d00 32%, #c93313 65%, #5b1207 100%) !important; border: 2px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 12px rgba(80, 20, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 18px rgba(255, 174, 0, 0.75), 0 0 34px rgba(255, 70, 0, 0.42), 0 12px 26px rgba(0, 0, 0, 0.75) !important; animation: downloadVipPulse 1.55s ease-in-out infinite, downloadVipFloat 2.8s ease-in-out infinite !important; } /* VIỀN SÁNG XOAY */ .sidebar-nav a[data-modal-target="#downloadModal"]::before { content: "" !important; position: absolute !important; inset: -3px !important; z-index: 0 !important; background: conic-gradient( from 0deg, #fff4a8, #ffb300, #ff1744, #7c4dff, #00e5ff, #fff4a8 ) !important; animation: downloadVipBorderSpin 2.2s linear infinite !important; filter: blur(1px) !important; } /* LỚP NỀN BÊN TRONG ĐỂ KHÔNG BỊ LẤP CHỮ */ .sidebar-nav a[data-modal-target="#downloadModal"]::after { content: "" !important; position: absolute !important; inset: 3px !important; z-index: 1 !important; border-radius: 16px !important; background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.24), transparent 25%), linear-gradient(135deg, #ffcc46 0%, #ff7a00 45%, #8f1b09 100%) !important; box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.16), inset 0 -6px 16px rgba(60, 0, 0, 0.42) !important; } /* ĐẨY ICON + CHỮ LÊN TRÊN */ .sidebar-nav a[data-modal-target="#downloadModal"] .icon, .sidebar-nav a[data-modal-target="#downloadModal"] .nav-text { position: relative !important; z-index: 3 !important; } /* ICON */ .sidebar-nav a[data-modal-target="#downloadModal"] .icon { font-size: 22px !important; animation: downloadIconBounce 1.1s ease-in-out infinite !important; filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px rgba(0, 229, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 0, 100, 0.75)) !important; } /* CHỮ TẢI GAME */ .sidebar-nav a[data-modal-target="#downloadModal"] .nav-text { font-size: 24px !important; font-weight: 1000 !important; letter-spacing: 1.6px !important; color: #ffffff !important; text-shadow: 0 2px 2px #000, 0 0 5px #fff, 0 0 10px #ffd54f, 0 0 18px #ff6f00, 0 0 28px #ff1744 !important; animation: downloadTextGlow 1.15s ease-in-out infinite !important; } /* VỆT SÁNG QUÉT QUA NÚT */ .sidebar-nav a[data-modal-target="#downloadModal"] span.nav-text::after { content: "" !important; position: absolute !important; top: -12px !important; left: -80px !important; width: 42px !important; height: 52px !important; background: linear-gradient( 115deg, transparent, rgba(255, 255, 255, 0.75), transparent ) !important; transform: skewX(-18deg) !important; animation: downloadTextShine 2.1s ease-in-out infinite !important; pointer-events: none !important; } /* HOVER */ .sidebar-nav a[data-modal-target="#downloadModal"]:hover { transform: translateY(-3px) scale(1.045) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -5px 12px rgba(80, 20, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 235, 120, 0.95), 0 0 42px rgba(255, 80, 0, 0.72), 0 0 60px rgba(255, 0, 120, 0.38), 0 16px 34px rgba(0, 0, 0, 0.85) !important; } /* CLICK */ .sidebar-nav a[data-modal-target="#downloadModal"]:active { transform: translateY(0) scale(0.98) !important; } /* ============================= */ /* KEYFRAMES NÚT TẢI GAME VIP */ /* ============================= */ @keyframes downloadVipPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } } @keyframes downloadVipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes downloadVipBorderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes downloadIconBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.18); } } @keyframes downloadTextGlow { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.75); transform: scale(1.035); } } @keyframes downloadTextShine { 0% { left: -90px; opacity: 0; } 35% { opacity: 1; } 70% { left: 160px; opacity: 0; } 100% { left: 160px; opacity: 0; } } /* =================================================== */ /* MODAL TẢI GAME - HOÀNG KIM TINH TẾ VIP */ /* =================================================== */ #downloadModal { background: radial-gradient(circle at top, rgba(45, 28, 0, 0.45), transparent 45%), radial-gradient(circle at bottom, rgba(255, 180, 0, 0.10), transparent 55%), rgba(0, 0, 0, 0.94) !important; } /* KHUNG CHÍNH */ #downloadModal .modal-content { position: relative !important; overflow: hidden !important; border: 1px solid rgba(255, 215, 120, 0.95) !important; background: radial-gradient(circle at top left, rgba(255, 225, 150, 0.10), transparent 30%), radial-gradient(circle at bottom right, rgba(255, 170, 0, 0.10), transparent 36%), linear-gradient(135deg, rgba(22, 14, 4, 0.98), rgba(7, 4, 1, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 193, 7, 0.22), 0 0 30px rgba(255, 145, 0, 0.14), 0 26px 60px rgba(0, 0, 0, 1) !important; animation: goldenModalGlow 2.8s ease-in-out infinite !important; } /* VIỀN TRONG */ #downloadModal .modal-content::before { content: "" !important; position: absolute !important; inset: 8px !important; border-radius: 16px !important; border: 1px solid rgba(255, 235, 180, 0.18) !important; pointer-events: none !important; z-index: 1 !important; } /* ÁNH SÁNG QUÉT NHẸ */ #downloadModal .modal-content::after { content: "" !important; position: absolute !important; top: -20% !important; left: -70% !important; width: 42% !important; height: 140% !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 240, 180, 0.18) 50%, rgba(255, 255, 255, 0.10) 55%, transparent 100% ) !important; transform: rotate(8deg) !important; animation: goldenShineSweep 3.8s ease-in-out infinite !important; } /* NỘI DUNG NỔI TRÊN HIỆU ỨNG */ #downloadModal .modal-header, #downloadModal .modal-body, #downloadModal .modal-footer { position: relative !important; z-index: 3 !important; } /* TIÊU ĐỀ */ #downloadModal .modal-title { color: #fff1c2 !important; font-weight: 1000 !important; letter-spacing: 0.8px !important; text-shadow: 0 0 3px #000, 0 0 8px rgba(255, 220, 120, 0.55), 0 0 16px rgba(255, 180, 0, 0.25) !important; animation: goldenTitlePulse 2s ease-in-out infinite !important; } /* NÚT X */ #downloadModal .modal-close { border: 1px solid rgba(255, 222, 120, 0.95) !important; color: #ffe9a8 !important; background: rgba(0, 0, 0, 0.78) !important; box-shadow: 0 0 10px rgba(255, 193, 7, 0.20), inset 0 0 10px rgba(255, 220, 120, 0.04) !important; transition: 0.2s ease !important; } #downloadModal .modal-close:hover { transform: scale(1.08) !important; background: rgba(255, 193, 7, 0.10) !important; box-shadow: 0 0 16px rgba(255, 193, 7, 0.38), 0 0 24px rgba(255, 145, 0, 0.18) !important; } /* TIÊU ĐỀ NHÓM */ #downloadModal .download-group-title { color: #ffe59a !important; font-weight: 1000 !important; text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 210, 100, 0.42) !important; } /* BADGE */ #downloadModal .badge-new { background: rgba(10, 8, 3, 0.96) !important; border: 1px solid rgba(255, 215, 120, 0.90) !important; color: #ffe082 !important; box-shadow: 0 0 8px rgba(255, 193, 7, 0.20), inset 0 0 8px rgba(255, 235, 180, 0.04) !important; text-shadow: 0 0 6px rgba(255, 220, 100, 0.45) !important; animation: goldenBadgeBlink 2.2s ease-in-out infinite !important; } /* CÁC Ô LINK */ #downloadModal .download-link { position: relative !important; overflow: hidden !important; border: 1px solid rgba(255, 210, 110, 0.88) !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(12, 8, 2, 0.96), rgba(2, 1, 0, 0.98)) !important; color: #fff6dc !important; box-shadow: inset 0 0 10px rgba(255, 245, 220, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.92), 0 8px 18px rgba(0, 0, 0, 0.72), 0 0 8px rgba(255, 193, 7, 0.08) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important; } /* VIỀN SÁNG QUÉT QUA TỪNG Ô */ #downloadModal .download-link::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 235, 180, 0.16) 50%, rgba(255, 255, 255, 0.08) 60%, transparent 100% ) !important; transform: translateX(-130%) !important; animation: goldenItemShine 3.2s ease-in-out infinite !important; } /* HOVER Ô */ #downloadModal .download-link:hover { transform: translateY(-1px) scale(1.01) !important; border-color: rgba(255, 232, 150, 0.98) !important; background: linear-gradient(180deg, rgba(20, 12, 2, 0.98), rgba(6, 3, 0, 0.98)) !important; box-shadow: inset 0 0 10px rgba(255, 245, 220, 0.05), 0 0 0 1px rgba(255, 215, 120, 0.20), 0 10px 24px rgba(0, 0, 0, 0.82), 0 0 16px rgba(255, 193, 7, 0.18), 0 0 24px rgba(255, 145, 0, 0.08) !important; } /* CHỮ Ô */ #downloadModal .download-link div { color: #fff6d7 !important; font-weight: 900 !important; text-shadow: 0 0 3px #000, 0 0 6px rgba(255, 220, 120, 0.18) !important; } #downloadModal .download-link span { color: #ffeab5 !important; font-weight: 800 !important; text-shadow: 0 0 2px #000, 0 0 4px rgba(255, 215, 120, 0.15) !important; } /* NỘI DUNG GHI CHÚ */ #downloadModal .modal-body p { color: #fff0ca !important; text-shadow: 0 0 3px #000 !important; } /* NÚT ĐÓNG */ #downloadModal .btn-ghost { border: 1px solid rgba(255, 215, 120, 0.90) !important; color: #fff0c2 !important; background: rgba(0, 0, 0, 0.78) !important; box-shadow: 0 0 8px rgba(255, 193, 7, 0.16), inset 0 0 8px rgba(255, 235, 180, 0.04) !important; transition: 0.2s ease !important; } #downloadModal .btn-ghost:hover { transform: translateY(-1px) !important; background: rgba(255, 193, 7, 0.10) !important; box-shadow: 0 0 14px rgba(255, 193, 7, 0.25), 0 0 20px rgba(255, 145, 0, 0.10) !important; } /* ========================= */ /* KEYFRAMES HOÀNG KIM */ /* ========================= */ @keyframes goldenModalGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 193, 7, 0.18), 0 0 28px rgba(255, 145, 0, 0.10), 0 26px 60px rgba(0, 0, 0, 1); } 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 215, 80, 0.28), 0 0 36px rgba(255, 160, 0, 0.15), 0 26px 60px rgba(0, 0, 0, 1); } } @keyframes goldenShineSweep { 0% { left: -70%; opacity: 0; } 20% { opacity: 0.4; } 50% { opacity: 0.7; } 80% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } } @keyframes goldenItemShine { 0% { transform: translateX(-130%); } 45% { transform: translateX(130%); } 100% { transform: translateX(130%); } } @keyframes goldenTitlePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } @keyframes goldenBadgeBlink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } } /* ================================================= */ /* CÔNG THỨC - MÀU TẬP TRUNG NỘI DUNG, DỄ ĐỌC */ /* ================================================= */ #playGuideModal { background: radial-gradient(circle at top, rgba(45, 28, 0, 0.28), transparent 42%), rgba(0, 0, 0, 0.94) !important; } /* KHUNG CHÍNH */ #playGuideModal .modal-content { border: 1px solid rgba(210, 170, 75, 0.78) !important; background: radial-gradient(circle at top left, rgba(255, 210, 90, 0.07), transparent 32%), linear-gradient(135deg, rgba(10, 8, 4, 0.98), rgba(0, 0, 0, 0.98)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 24px 65px rgba(0, 0, 0, 1), 0 0 22px rgba(255, 190, 60, 0.13) !important; } /* TIÊU ĐỀ */ #playGuideModal .modal-title { color: #fff1bf !important; font-weight: 1000 !important; letter-spacing: 0.8px !important; text-shadow: 0 2px 2px #000, 0 0 8px rgba(255, 210, 100, 0.38) !important; } /* NÚT X */ #playGuideModal .modal-close { border: 1px solid rgba(230, 190, 90, 0.88) !important; color: #ffe9a8 !important; background: rgba(0, 0, 0, 0.82) !important; box-shadow: none !important; } #playGuideModal .modal-close:hover { background: rgba(255, 190, 60, 0.12) !important; box-shadow: 0 0 12px rgba(255, 200, 80, 0.25) !important; } /* THANH TÌM KIẾM - RÕ NHƯNG KHÔNG CHÓI */ #playGuideModal .craft-search-box { border: 1px solid rgba(230, 190, 90, 0.82) !important; background: linear-gradient(180deg, rgba(8, 7, 4, 0.98), rgba(0, 0, 0, 0.98)) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(255, 210, 90, 0.04) !important; } #playGuideModal .craft-search-icon { border: 1px solid rgba(220, 180, 80, 0.75) !important; background: rgba(0, 0, 0, 0.82) !important; box-shadow: none !important; } #playGuideModal .craft-search-box input { border: 1px solid rgba(210, 170, 75, 0.75) !important; background: rgba(0, 0, 0, 0.82) !important; color: #fff8df !important; font-weight: 900 !important; box-shadow: inset 0 0 10px rgba(255, 210, 90, 0.04) !important; } #playGuideModal .craft-search-box input::placeholder { color: rgba(255, 235, 185, 0.70) !important; } /* NÚT XÓA */ #playGuideModal .craft-search-box button { border: 1px solid rgba(255, 210, 90, 0.90) !important; background: linear-gradient(180deg, #ffd36a, #d89018) !important; color: #1b1000 !important; font-weight: 1000 !important; box-shadow: 0 0 10px rgba(255, 190, 60, 0.18) !important; } #playGuideModal .craft-search-box button:hover { filter: brightness(1.12) !important; } /* TIÊU ĐỀ NHÓM */ #playGuideModal .download-group-title { color: #ffe7a8 !important; font-weight: 1000 !important; text-shadow: 0 2px 2px #000, 0 0 7px rgba(255, 210, 90, 0.28) !important; } /* BADGE */ #playGuideModal .badge-new { background: rgba(0, 0, 0, 0.86) !important; border: 1px solid rgba(210, 170, 75, 0.82) !important; color: #ffe082 !important; text-shadow: none !important; box-shadow: none !important; animation: none !important; } /* Ô công thức - phần quan trọng nhất */ #playGuideModal .download-link { border: 1px solid rgba(190, 150, 65, 0.82) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(7, 7, 6, 0.98), rgba(0, 0, 0, 0.98)) !important; box-shadow: inset 0 0 12px rgba(255, 210, 90, 0.025), 0 8px 18px rgba(0, 0, 0, 0.60) !important; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important; } /* Hover nhẹ để người xem biết đang trỏ vào dòng nào */ #playGuideModal .download-link:hover { transform: translateY(-1px) !important; border-color: rgba(255, 220, 120, 0.96) !important; background: linear-gradient(180deg, rgba(18, 14, 5, 0.98), rgba(3, 3, 2, 0.98)) !important; box-shadow: inset 0 0 12px rgba(255, 210, 90, 0.05), 0 0 0 1px rgba(255, 215, 120, 0.12), 0 10px 22px rgba(0, 0, 0, 0.72) !important; } /* Tên vật phẩm */ #playGuideModal .download-link div { color: #ffffff !important; font-weight: 1000 !important; text-shadow: 0 2px 2px #000, 0 0 5px rgba(255, 255, 255, 0.16) !important; } /* Nguyên liệu / mô tả */ #playGuideModal .download-link span { color: #f6e6bd !important; font-weight: 850 !important; text-shadow: 0 2px 2px #000 !important; } /* Ghi chú cuối */ #playGuideModal .craft-note, #playGuideModal .modal-body p { color: #f4dfb2 !important; font-weight: 650 !important; text-shadow: 0 2px 2px #000 !important; } /* Thanh cuộn bớt chói, vẫn dễ nhìn */ #playGuideModal .modal-body::-webkit-scrollbar { width: 8px !important; } #playGuideModal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.78) !important; border-radius: 999px !important; } #playGuideModal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d6a84a, #9d6d13) !important; border-radius: 999px !important; box-shadow: 0 0 8px rgba(255, 190, 60, 0.30) !important; } /* NÚT ĐÓNG */ #playGuideModal .btn-ghost { border: 1px solid rgba(210, 170, 75, 0.82) !important; background: rgba(0, 0, 0, 0.82) !important; color: #ffe8ad !important; box-shadow: none !important; } #playGuideModal .btn-ghost:hover { background: rgba(255, 190, 60, 0.10) !important; box-shadow: 0 0 12px rgba(255, 200, 80, 0.20) !important; } /* ===================================== */ /* FIX CHUẨN: TẤT CẢ MODAL MENU KHÔNG LỆCH */ /* ===================================== */ html.modal-open-lock, body.modal-open-lock { overflow: hidden !important; } /* modal luôn phủ đúng màn hình trình duyệt */ .modal { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 16px !important; overflow: hidden !important; z-index: 99999 !important; } /* khi modal mở */ .modal.modal--visible { display: flex !important; } /* khung modal không vượt quá màn hình */ .modal .modal-content { max-height: calc(100dvh - 32px) !important; margin: 0 auto !important; transform: none !important; } /* phần thân modal tự cuộn bên trong */ .modal .modal-body { max-height: calc(100dvh - 145px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; } /* modal rộng như Công Thức / Thông Tin NPC */ #playGuideModal .modal-content, #newMenuModal .modal-content { max-height: calc(100dvh - 32px) !important; } #playGuideModal .modal-body, #newMenuModal .modal-body { max-height: calc(100dvh - 145px) !important; } /* chống body có transform làm fixed modal bị lệch */ html, body { transform: none !important; } /* =============================== */ /* KHUNG TRẠNG THÁI + THÔNG SỐ VIP */ /* =============================== */ .sidebar-section-title { margin: 8px 6px 6px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #ffe08a !important; text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 190, 60, 0.75), 0 0 16px rgba(255, 120, 0, 0.45); } /* KHUNG CHUNG */ .sidebar-block { position: relative !important; overflow: hidden !important; border-radius: 18px !important; padding: 12px 13px !important; background: radial-gradient(circle at top left, rgba(255, 190, 70, 0.14), transparent 45%), radial-gradient(circle at bottom right, rgba(0, 255, 160, 0.08), transparent 50%), linear-gradient(180deg, rgba(11, 13, 36, 0.98), rgba(4, 5, 18, 0.98)) !important; border: 1px solid rgba(255, 215, 128, 0.65) !important; box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.04), inset 0 0 26px rgba(255, 180, 60, 0.05), 0 10px 26px rgba(0, 0, 0, 0.88), 0 0 18px rgba(255, 170, 0, 0.16) !important; } /* ÁNH SÁNG QUÉT TRONG KHUNG */ .sidebar-block::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.08) 28%, transparent 55% ) !important; transform: translateX(-120%) !important; animation: sidebarBlockShine 4s ease-in-out infinite !important; pointer-events: none !important; } /* VIỀN TRONG */ .sidebar-block::after { content: "" !important; position: absolute !important; inset: 3px !important; border-radius: 14px !important; border: 1px solid rgba(255, 230, 160, 0.16) !important; pointer-events: none !important; } /* PILL TRẠNG THÁI SERVER */ .status-pill { position: relative !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 5px 12px !important; margin-bottom: 9px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(5, 18, 10, 0.98), rgba(2, 8, 5, 0.98)) !important; border: 1px solid rgba(0, 255, 120, 0.75) !important; color: #eaffef !important; font-size: 12px !important; font-weight: 800 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 8px rgba(0, 255, 102, 0.28), 0 0 18px rgba(0, 255, 102, 0.18) !important; } /* ĐÈN XANH SERVER */ .status-dot { width: 10px !important; height: 10px !important; border-radius: 999px !important; background: #00ff66 !important; box-shadow: 0 0 5px #00ff66, 0 0 12px #00ff66, 0 0 22px rgba(0, 255, 102, 0.95) !important; animation: serverDotVip 1.1s ease-in-out infinite !important; } /* DANH SÁCH NHỎ */ .small-list { position: relative !important; z-index: 2 !important; list-style: none !important; padding: 0 !important; margin: 4px 0 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; } /* TỪNG DÒNG */ .small-list li { padding: 4px 0 !important; color: #fff4d6 !important; font-weight: 700 !important; text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 200, 90, 0.28); } /* PHẦN CHỮ STRONG */ .small-list li strong { color: #ffd84d !important; font-weight: 1000 !important; text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 216, 77, 0.95), 0 0 12px rgba(255, 160, 0, 0.75) !important; } /* HIỆU ỨNG CHẠY SÁNG KHUNG */ @keyframes sidebarBlockShine { 0% { transform: translateX(-130%); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateX(130%); opacity: 0; } 100% { transform: translateX(130%); opacity: 0; } } /* HIỆU ỨNG ĐÈN XANH NHẸ */ @keyframes serverDotVip { 0% { opacity: 0.65; transform: scale(0.92); box-shadow: 0 0 4px #00ff66, 0 0 10px rgba(0, 255, 102, 0.55); } 50% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 7px #00ff66, 0 0 16px #00ff66, 0 0 28px rgba(0, 255, 102, 0.95); } 100% { opacity: 0.65; transform: scale(0.92); box-shadow: 0 0 4px #00ff66, 0 0 10px rgba(0, 255, 102, 0.55); } } /* ===================================== */ /* HIỆU ỨNG NHẤP NHÁY MÀU SẮC: CẬP NHẬT */ /* ===================================== */ .badge-new { display: inline-block !important; font-weight: 1000 !important; letter-spacing: 0.6px !important; animation: badgeUpdateRainbow 1.15s ease-in-out infinite !important; text-shadow: 0 0 4px #000, 0 0 8px currentColor, 0 0 16px currentColor, 0 0 26px currentColor !important; } @keyframes badgeUpdateRainbow { 0% { color: #ff3b3b; transform: scale(1); filter: brightness(1.1); } 20% { color: #ffd700; transform: scale(1.08); filter: brightness(1.7); } 40% { color: #00ff66; transform: scale(1); filter: brightness(1.25); } 60% { color: #00e5ff; transform: scale(1.08); filter: brightness(1.75); } 80% { color: #ff4fd8; transform: scale(1); filter: brightness(1.35); } 100% { color: #ff3b3b; transform: scale(1); filter: brightness(1.1); } } /* ===================================== */ /* CẬP NHẬT LIÊN TỤC - CHỈ ĐỔI MÀU CHỮ */ /* KHÔNG NHẢY - KHÔNG PHÓNG TO */ /* ===================================== */ .badge-new { display: inline-block !important; font-size: 10px !important; font-weight: 1000 !important; letter-spacing: 0.6px !important; padding: 1px 7px !important; margin-left: 4px !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.86) !important; border: 1px solid rgba(255, 235, 59, 0.9) !important; animation: badgeUpdateColorOnly 1.2s linear infinite !important; text-shadow: 0 0 4px #000, 0 0 7px currentColor, 0 0 14px currentColor, 0 0 24px currentColor !important; } /* CHỈ CHUYỂN MÀU CHỮ */ @keyframes badgeUpdateColorOnly { 0% { color: #ff3b3b; filter: brightness(1.2); } 20% { color: #ffd700; filter: brightness(1.55); } 40% { color: #00ff66; filter: brightness(1.35); } 60% { color: #00e5ff; filter: brightness(1.55); } 80% { color: #ff4fd8; filter: brightness(1.4); } 100% { color: #ff3b3b; filter: brightness(1.2); } } /* TRƯỜNG HỢP TRONG MODAL BỊ CSS KHÁC ĐÈ */ #guideModal .badge-new, #downloadModal .badge-new, #playGuideModal .badge-new, #newMenuModal .badge-new, #contactModal .badge-new { animation: badgeUpdateColorOnly 1.2s linear infinite !important; text-shadow: 0 0 4px #000, 0 0 7px currentColor, 0 0 14px currentColor, 0 0 24px currentColor !important; } /* ===================================== */ /* FIX LỘ TRÌNH SEVER VIỆT NAM - LỬA NHẸ ĐẸP */ /* DÁN XUỐNG CUỐI CÙNG FILE CSS */ /* ===================================== */ .roadmap-title { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 17px !important; font-weight: 1000 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #ffe08a !important; background: linear-gradient( 90deg, #fff7cf 0%, #ffe28a 18%, #ffbf2e 36%, #ff8a00 52%, #ffd76e 72%, #fff7cf 100% ) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: roadmapFireSoftMove 2.8s linear infinite !important; text-shadow: 0 1px 2px #000, 0 0 4px rgba(255, 220, 120, 0.45), 0 0 9px rgba(255, 150, 0, 0.35) !important; filter: drop-shadow(0 0 4px rgba(255, 190, 80, 0.35)) drop-shadow(0 0 9px rgba(255, 120, 0, 0.22)) !important; } /* TẮT LỚP LỬA MỜ PHÍA SAU CỦA BẢN CŨ */ .roadmap-title::after { content: none !important; display: none !important; } /* TẮT ANIMATION LỬA MẠNH CŨ */ .roadmap-title { transform: none !important; } /* ÁNH VÀNG CAM CHẠY NHẸ TRÊN CHỮ */ @keyframes roadmapFireSoftMove { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } /* ===================================== */ /* TINH CHỈNH LỘ TRÌNH - LỬA VÀNG CAM RÕ HƠN */ /* ===================================== */ .roadmap-title { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 18px !important; font-weight: 1000 !important; text-transform: uppercase !important; letter-spacing: 1.1px !important; background: linear-gradient( 90deg, #fff8d2 0%, #ffe18a 16%, #ffb300 34%, #ff7a00 50%, #ffb300 66%, #fff1b8 82%, #fff8d2 100% ) !important; background-size: 260% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: roadmapFireSoftMove 2.2s linear infinite !important; text-shadow: 0 1px 2px #000, 0 0 4px rgba(255, 245, 180, 0.55), 0 0 9px rgba(255, 180, 40, 0.55), 0 0 16px rgba(255, 100, 0, 0.35) !important; filter: drop-shadow(0 0 4px rgba(255, 220, 120, 0.45)) drop-shadow(0 0 9px rgba(255, 150, 0, 0.35)) drop-shadow(0 0 14px rgba(255, 80, 0, 0.18)) !important; } .roadmap-title::after { content: none !important; display: none !important; } @keyframes roadmapFireSoftMove { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } } /* ===================================== */ /* LỘ TRÌNH SEVER VIỆT NAM - CHỮ VÀNG SANG TRỌNG */ /* DÁN XUỐNG CUỐI FILE CSS */ /* ===================================== */ .roadmap-title { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 18px !important; font-weight: 1000 !important; text-transform: uppercase !important; letter-spacing: 1.6px !important; line-height: 1.25 !important; background: linear-gradient( 180deg, #fff8cf 0%, #ffe58a 18%, #d9a331 38%, #8b5a12 52%, #ffd66b 68%, #fff3b0 82%, #b87918 100% ) !important; background-size: 100% 180% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: roadmapGoldLuxury 3.2s ease-in-out infinite !important; -webkit-text-stroke: 0.45px rgba(255, 235, 170, 0.55) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95), 0 2px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 220, 120, 0.45), 0 0 12px rgba(255, 170, 40, 0.28) !important; filter: drop-shadow(0 0 3px rgba(255, 210, 100, 0.35)) drop-shadow(0 0 8px rgba(255, 160, 40, 0.22)) !important; } /* TẮT LỚP LỬA / HÀO QUANG CŨ */ .roadmap-title::after { content: none !important; display: none !important; } /* ÁNH KIM LOẠI CHẠY NHẸ */ @keyframes roadmapGoldLuxury { 0% { background-position: 0% 0%; filter: drop-shadow(0 0 3px rgba(255, 210, 100, 0.32)) drop-shadow(0 0 8px rgba(255, 160, 40, 0.2)) brightness(1); } 50% { background-position: 0% 100%; filter: drop-shadow(0 0 4px rgba(255, 230, 140, 0.45)) drop-shadow(0 0 10px rgba(255, 180, 50, 0.3)) brightness(1.12); } 100% { background-position: 0% 0%; filter: drop-shadow(0 0 3px rgba(255, 210, 100, 0.32)) drop-shadow(0 0 8px rgba(255, 160, 40, 0.2)) brightness(1); } } /* ===================================== */ /* NHẤN MẠNH VIỆT NAM - NỀN ĐỎ CHỮ VÀNG */ /* CÓ HIỆU ỨNG CHẠY XUNG QUANH VIỀN */ /* ===================================== */ .vn-strong-text { position: relative !important; display: inline-block !important; margin-left: 6px !important; padding: 3px 12px 4px !important; font-size: 1.15em !important; font-weight: 1000 !important; letter-spacing: 2px !important; line-height: 1.1 !important; color: #ffe66d !important; -webkit-text-fill-color: #ffe66d !important; background: radial-gradient(circle at 50% 45%, rgba(255, 210, 80, 0.22), transparent 45%), linear-gradient(180deg, #c40000 0%, #8f0000 45%, #3a0000 100%) !important; border: 1px solid rgba(255, 225, 120, 0.9) !important; border-radius: 9px !important; overflow: hidden !important; z-index: 1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 8px rgba(0, 0, 0, 0.45), 0 0 8px rgba(255, 0, 0, 0.65), 0 0 16px rgba(255, 80, 0, 0.55), 0 0 26px rgba(255, 180, 40, 0.35) !important; text-shadow: 0 1px 2px #000, 0 0 4px rgba(255, 255, 180, 0.85), 0 0 9px rgba(255, 220, 60, 0.75), 0 0 16px rgba(255, 120, 0, 0.55) !important; animation: vnRedGoldPulse 1.6s ease-in-out infinite !important; } /* VIỀN SÁNG CHẠY XUNG QUANH */ .vn-strong-text::before { content: "" !important; position: absolute !important; inset: -2px !important; z-index: -1 !important; border-radius: 11px !important; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, #fff7a8 80deg, #ffca28 105deg, #ff3d00 130deg, transparent 165deg, transparent 360deg ) !important; animation: vnBorderRotate 1.7s linear infinite !important; } /* LỚP NỀN ĐỎ BÊN TRONG ĐỂ CHỮ KHÔNG BỊ VIỀN CHE */ .vn-strong-text::after { content: "" !important; position: absolute !important; inset: 2px !important; z-index: -1 !important; border-radius: 7px !important; background: radial-gradient(circle at 50% 35%, rgba(255, 230, 120, 0.18), transparent 48%), linear-gradient(180deg, #c40000 0%, #8f0000 48%, #3a0000 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 8px rgba(0, 0, 0, 0.42) !important; } @keyframes vnRedGoldPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } @keyframes vnBorderRotate { 0% { transform: rotate(0deg); filter: brightness(1); } 50% { filter: brightness(1.35); } 100% { transform: rotate(360deg); filter: brightness(1); } } /* ===================================== */ /* ROADMAP NOTE - NỔI BẬT RÕ RÀNG HƠN */ /* ===================================== */ .roadmap-note { font-size: 13.5px !important; font-weight: 1000 !important; letter-spacing: 0.8px !important; line-height: 1.35 !important; color: #fff8d6 !important; padding: 6px 14px !important; border-radius: 999px !important; background: radial-gradient(circle at top, rgba(255, 230, 150, 0.22), transparent 55%), linear-gradient(180deg, rgba(90, 24, 0, 0.92), rgba(20, 5, 0, 0.92)) !important; border: 1px solid rgba(255, 220, 130, 0.75) !important; text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 245, 190, 0.7), 0 0 12px rgba(255, 180, 60, 0.45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 10px rgba(255, 180, 60, 0.08), 0 0 10px rgba(255, 170, 50, 0.26) !important; } /* ===================================== */ /* LỘ TRÌNH PHÁT TRIỂN SEVER - NỔI BẬT SANG */ /* KHÔNG CÓ VỆT SÁNG DƯỚI CHỮ */ /* ===================================== */ .fire-text { position: relative !important; display: inline-block !important; padding: 2px 4px !important; font-size: 19px !important; font-weight: 1000 !important; letter-spacing: 1.4px !important; line-height: 1.2 !important; text-transform: uppercase !important; background: linear-gradient( 180deg, #fff7c8 0%, #ffe28a 22%, #ffc83d 42%, #ff9f1a 62%, #d98a12 78%, #fff0a6 100% ) !important; background-size: 100% 180% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0.55px rgba(255, 245, 190, 0.65) !important; animation: fireTextLuxuryMove 3s ease-in-out infinite !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75), 0 2px 2px rgba(0, 0, 0, 0.55), 0 0 4px rgba(255, 230, 140, 0.55), 0 0 9px rgba(255, 170, 40, 0.42), 0 0 14px rgba(255, 100, 0, 0.22) !important; filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.45)) drop-shadow(0 0 8px rgba(255, 150, 40, 0.28)) brightness(1.08) !important; } /* TẮT VỆT SÁNG DƯỚI CHỮ */ .fire-text::after { content: none !important; display: none !important; } @keyframes fireTextLuxuryMove { 0% { background-position: 0% 0%; filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.4)) drop-shadow(0 0 8px rgba(255, 150, 40, 0.22)) brightness(1.04); } 50% { background-position: 0% 100%; filter: drop-shadow(0 0 4px rgba(255, 235, 150, 0.55)) drop-shadow(0 0 10px rgba(255, 180, 50, 0.32)) brightness(1.14); } 100% { background-position: 0% 0%; filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.4)) drop-shadow(0 0 8px rgba(255, 150, 40, 0.22)) brightness(1.04); } } /* ===================================== */ /* ICON MENU BÊN TRÁI - SÁNG TỪ TRÊN XUỐNG DƯỚI */ /* LẶP LẠI TỰ ĐỘNG */ /* ===================================== */ .sidebar-nav .nav-link span.icon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; min-width: 26px !important; height: 26px !important; z-index: 2 !important; animation: sidebarIconFlow 7.2s ease-in-out infinite !important; } /* HÀO QUANG / VÒNG SÁNG QUANH ICON */ .sidebar-nav .nav-link span.icon::after { content: "" !important; position: absolute !important; inset: -6px !important; border-radius: 999px !important; pointer-events: none !important; opacity: 0 !important; background: radial-gradient( circle, rgba(255, 245, 180, 0.42) 0%, rgba(255, 180, 40, 0.22) 45%, rgba(255, 100, 0, 0.08) 70%, transparent 100% ) !important; box-shadow: 0 0 8px rgba(255, 235, 120, 0.32), 0 0 16px rgba(255, 170, 50, 0.22) !important; animation: sidebarIconAura 7.2s ease-in-out infinite !important; } /* ICON 1 */ .sidebar-nav .nav-link:nth-child(1) span.icon, .sidebar-nav .nav-link:nth-child(1) span.icon::after { animation-delay: 0s !important; } /* ICON 2 */ .sidebar-nav .nav-link:nth-child(2) span.icon, .sidebar-nav .nav-link:nth-child(2) span.icon::after { animation-delay: 0.9s !important; } /* ICON 3 */ .sidebar-nav .nav-link:nth-child(3) span.icon, .sidebar-nav .nav-link:nth-child(3) span.icon::after { animation-delay: 1.8s !important; } /* ICON 4 */ .sidebar-nav .nav-link:nth-child(4) span.icon, .sidebar-nav .nav-link:nth-child(4) span.icon::after { animation-delay: 2.7s !important; } /* ICON 5 */ .sidebar-nav .nav-link:nth-child(5) span.icon, .sidebar-nav .nav-link:nth-child(5) span.icon::after { animation-delay: 3.6s !important; } /* ICON 6 */ .sidebar-nav .nav-link:nth-child(6) span.icon, .sidebar-nav .nav-link:nth-child(6) span.icon::after { animation-delay: 4.5s !important; } /* HIỆU ỨNG SÁNG LẦN LƯỢT */ @keyframes sidebarIconFlow { 0%, 8%, 100% { transform: scale(1) translateY(0); filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)) drop-shadow(0 0 0 rgba(255, 180, 40, 0)); } 14% { transform: scale(1.18) translateY(-1px); filter: brightness(1.45) drop-shadow(0 0 5px rgba(255, 255, 210, 0.75)) drop-shadow(0 0 12px rgba(255, 180, 40, 0.78)) drop-shadow(0 0 22px rgba(255, 90, 0, 0.42)); } 20% { transform: scale(1.08) translateY(0); filter: brightness(1.18) drop-shadow(0 0 3px rgba(255, 245, 190, 0.45)) drop-shadow(0 0 8px rgba(255, 170, 50, 0.4)); } } /* HÀO QUANG PHỤ */ @keyframes sidebarIconAura { 0%, 8%, 100% { opacity: 0; transform: scale(0.9); } 14% { opacity: 1; transform: scale(1.18); } 20% { opacity: 0.35; transform: scale(1.04); } } /* ===================================== */ /* KÉO DÀI KHUNG SIDEBAR NGOÀI XUỐNG THÊM */ /* ===================================== */ .sidebar { height: calc(100vh - 16px) !important; max-height: none !important; padding-bottom: 26px !important; } /* ===================================== */ /* SIDEBAR - KHUNG NGOÀI ÔM SÁT NỘI DUNG */ /* KHÔNG BỊ DÀI THỪA PHÍA DƯỚI */ /* ===================================== */ .sidebar { height: auto !important; min-height: 0 !important; max-height: none !important; align-self: start !important; padding: 16px 14px 18px !important; gap: 14px !important; overflow: visible !important; } /* Bỏ kéo dài ép theo màn hình */ .app-shell { align-items: start !important; } /* ===================================== */ /* CHỮ NỔI BẬT - KIM CƯƠNG ĐỦ MÀU */ /* ===================================== */ .card-tag { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 11px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 1000 !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; color: transparent !important; background: linear-gradient( 90deg, #00e5ff, #40c4ff, #7c4dff, #ff4fd8, #ff1744, #ffea00, #00ff99, #00e5ff ) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; border: 1px solid rgba(180, 245, 255, 0.9) !important; box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.16), 0 0 6px rgba(0, 229, 255, 0.45), 0 0 12px rgba(124, 77, 255, 0.35), 0 0 18px rgba(255, 79, 216, 0.28) !important; text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 8px currentColor !important; animation: diamondColorMove 2.2s linear infinite !important; } /* ÁNH KIM CƯƠNG CHẠY QUA */ .card-tag::after { content: "" !important; position: absolute !important; inset: -1px !important; border-radius: 999px !important; pointer-events: none !important; background: linear-gradient( 115deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.75) 48%, transparent 62%, transparent 100% ) !important; transform: translateX(-120%) !important; animation: diamondShineSweep 2.4s ease-in-out infinite !important; } @keyframes diamondColorMove { 0% { background-position: 0% 50%; filter: brightness(1.05); } 50% { background-position: 150% 50%; filter: brightness(1.35); } 100% { background-position: 300% 50%; filter: brightness(1.05); } } @keyframes diamondShineSweep { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: 1; } 60% { transform: translateX(120%); opacity: 0; } 100% { transform: translateX(120%); opacity: 0; } } /* ===================================== */ /* NỔI BẬT - KIM CƯƠNG PHA LÊ BÊN TRONG */ /* ===================================== */ .card-tag { position: relative !important; isolation: isolate !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 5px 13px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 1000 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: transparent !important; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 28%), radial-gradient(circle at 70% 80%, rgba(0, 229, 255, 0.18), transparent 34%), linear-gradient(180deg, rgba(8, 22, 42, 0.98), rgba(2, 6, 18, 0.98)) !important; border: 1px solid rgba(160, 245, 255, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -2px 8px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(0, 229, 255, 0.12), 0 0 6px rgba(0, 229, 255, 0.42), 0 0 12px rgba(124, 77, 255, 0.28), 0 0 18px rgba(255, 79, 216, 0.22) !important; } /* CHỮ KIM CƯƠNG BÊN TRONG */ .card-tag { background-clip: padding-box !important; } .card-tag { -webkit-text-fill-color: transparent !important; } .card-tag { background-image: linear-gradient( 90deg, #baffff 0%, #00e5ff 16%, #7c4dff 32%, #ff4fd8 48%, #ffea00 64%, #00ff99 82%, #baffff 100% ), radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 28%), radial-gradient(circle at 70% 80%, rgba(0, 229, 255, 0.18), transparent 34%), linear-gradient(180deg, rgba(8, 22, 42, 0.98), rgba(2, 6, 18, 0.98)) !important; background-size: 260% 100%, auto, auto, auto !important; background-position: 0% 50%, center, center, center !important; -webkit-background-clip: text, padding-box, padding-box, padding-box !important; background-clip: text, padding-box, padding-box, padding-box !important; animation: cardTagDiamondText 2.4s linear infinite !important; text-shadow: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 8px rgba(0, 229, 255, 0.55), 0 0 12px rgba(255, 79, 216, 0.35) !important; } /* ÁNH SÁNG NHỎ CHẠY BÊN TRONG KHUNG */ .card-tag::before { content: "" !important; position: absolute !important; inset: 1px !important; z-index: -1 !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient( 115deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.22) 47%, rgba(0, 229, 255, 0.16) 53%, transparent 68%, transparent 100% ) !important; transform: translateX(-120%) !important; animation: cardTagInnerShine 2.8s ease-in-out infinite !important; } /* TẮT VỆT CŨ BAY RA NGOÀI */ .card-tag::after { content: none !important; display: none !important; } @keyframes cardTagDiamondText { 0% { background-position: 0% 50%, center, center, center; filter: brightness(1.05); } 50% { background-position: 130% 50%, center, center, center; filter: brightness(1.25); } 100% { background-position: 260% 50%, center, center, center; filter: brightness(1.05); } } @keyframes cardTagInnerShine { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: 1; } 60% { transform: translateX(120%); opacity: 0; } 100% { transform: translateX(120%); opacity: 0; } } /* =============================== */ /* NÚT TẢI GAME - VIP HOÀNG KIM */ /* =============================== */ .nav-link[data-modal-target="#downloadModal"] { position: relative !important; overflow: hidden !important; min-height: 62px !important; border-radius: 18px !important; padding: 13px 18px !important; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.75), transparent 18%), linear-gradient(135deg, #fff176 0%, #ffb300 28%, #ff6f00 55%, #b71c1c 100%) !important; border: 2px solid #fff2a8 !important; color: #ffffff !important; font-size: 22px !important; font-weight: 1000 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; text-shadow: 0 2px 2px #000, 0 0 8px #ffffff, 0 0 14px #ffd54f, 0 0 24px #ff6f00 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), inset 0 -5px 10px rgba(90,0,0,0.45), 0 0 0 2px rgba(80,25,0,0.95), 0 8px 18px rgba(0,0,0,0.85), 0 0 18px rgba(255,193,7,0.95), 0 0 34px rgba(255,87,34,0.75) !important; animation: downloadVipPulse 1.6s ease-in-out infinite !important; } /* Icon Tải Game */ .nav-link[data-modal-target="#downloadModal"] .icon { font-size: 25px !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: linear-gradient(180deg, #ffffff, #64b5f6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.85), 0 0 16px rgba(33,150,243,0.8) !important; filter: drop-shadow(0 2px 2px #000); } /* Chữ TẢI GAME */ .nav-link[data-modal-target="#downloadModal"] .nav-text { font-size: 24px !important; font-weight: 1000 !important; color: #ffffff !important; } /* Viền sáng bên trong */ .nav-link[data-modal-target="#downloadModal"]::after { content: "" !important; position: absolute !important; inset: 4px !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.65) !important; pointer-events: none !important; } /* Ánh sáng quét ngang */ .nav-link[data-modal-target="#downloadModal"]::before { content: "" !important; position: absolute !important; top: -40% !important; left: -80% !important; width: 50% !important; height: 180% !important; background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,0.85) 45%, transparent 70% ) !important; transform: rotate(18deg) !important; animation: downloadVipShine 2.2s ease-in-out infinite !important; pointer-events: none !important; } /* Hover */ .nav-link[data-modal-target="#downloadModal"]:hover { transform: translateY(-3px) scale(1.04) !important; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9), transparent 18%), linear-gradient(135deg, #fff9c4 0%, #ffc107 26%, #ff6f00 55%, #d50000 100%) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), inset 0 -5px 10px rgba(90,0,0,0.45), 0 0 0 2px rgba(80,25,0,0.95), 0 12px 24px rgba(0,0,0,0.9), 0 0 24px rgba(255,235,59,1), 0 0 46px rgba(255,87,34,0.95) !important; } /* Hiệu ứng sáng nhẹ */ @keyframes downloadVipPulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.18); } 100% { filter: brightness(1); } } /* Hiệu ứng ánh sáng chạy */ @keyframes downloadVipShine { 0% { left: -90%; opacity: 0; } 30% { opacity: 1; } 65% { left: 130%; opacity: 0; } 100% { left: 130%; opacity: 0; } } /* =============================== */ /* NÚT TẢI GAME - CHÁY RÕ RÀNG */ /* =============================== */ .nav-link[data-modal-target="#downloadModal"] { position: relative !important; overflow: hidden !important; min-height: 62px !important; padding: 13px 18px !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffb52e 0%, #ff6a00 38%, #b32000 72%, #4b0800 100%) !important; border: 2px solid #ffd36a !important; color: #fff7d2 !important; font-weight: 1000 !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; text-shadow: 0 2px 2px #000, 0 0 5px #5a0000, 0 0 9px rgba(255, 120, 0, 0.85) !important; box-shadow: inset 0 2px 0 rgba(255, 230, 150, 0.65), inset 0 -5px 12px rgba(60, 0, 0, 0.75), 0 0 0 2px rgba(70, 15, 0, 0.95), 0 8px 18px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 100, 0, 0.65), 0 0 24px rgba(200, 30, 0, 0.55) !important; animation: downloadFireBreath 1.5s ease-in-out infinite !important; } /* Icon tải game rõ hơn */ .nav-link[data-modal-target="#downloadModal"] .icon { font-size: 25px !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: linear-gradient(180deg, #ffe9a6 0%, #ff9b00 45%, #9b1a00 100%) !important; border: 1px solid rgba(255, 235, 160, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 4px rgba(0,0,0,0.9), 0 0 9px rgba(255, 100, 0, 0.75) !important; filter: drop-shadow(0 2px 2px #000); } /* Chữ TẢI GAME */ .nav-link[data-modal-target="#downloadModal"] .nav-text { font-size: 24px !important; font-weight: 1000 !important; color: #fff3b0 !important; text-shadow: 0 2px 2px #000, 0 0 5px #ff6a00, 0 0 10px rgba(255, 40, 0, 0.75) !important; } /* Viền trong */ .nav-link[data-modal-target="#downloadModal"]::after { content: "" !important; position: absolute !important; inset: 4px !important; border-radius: 14px !important; border: 1px solid rgba(255, 220, 120, 0.55) !important; box-shadow: inset 0 0 8px rgba(255, 70, 0, 0.35) !important; pointer-events: none !important; } /* Lửa cháy phía dưới */ .nav-link[data-modal-target="#downloadModal"]::before { content: "" !important; position: absolute !important; left: -10% !important; right: -10% !important; bottom: -26px !important; height: 46px !important; background: radial-gradient(circle at 10% 100%, rgba(255, 230, 80, 0.75), transparent 35%), radial-gradient(circle at 28% 100%, rgba(255, 90, 0, 0.85), transparent 42%), radial-gradient(circle at 48% 100%, rgba(255, 180, 0, 0.8), transparent 38%), radial-gradient(circle at 68% 100%, rgba(255, 60, 0, 0.85), transparent 42%), radial-gradient(circle at 88% 100%, rgba(255, 190, 60, 0.75), transparent 35%); filter: blur(2px); opacity: 0.75; animation: downloadFireMove 0.9s ease-in-out infinite alternate !important; pointer-events: none !important; } /* Hover rõ, cháy mạnh nhưng không lóa */ .nav-link[data-modal-target="#downloadModal"]:hover { transform: translateY(-2px) scale(1.025) !important; background: linear-gradient(180deg, #ffd05a 0%, #ff7a00 35%, #c92400 72%, #5a0800 100%) !important; color: #fff8c9 !important; box-shadow: inset 0 2px 0 rgba(255, 235, 170, 0.75), inset 0 -5px 12px rgba(60, 0, 0, 0.78), 0 0 0 2px rgba(80, 15, 0, 0.95), 0 10px 22px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 120, 0, 0.85), 0 0 30px rgba(220, 35, 0, 0.7) !important; } /* Nhịp cháy nhẹ */ @keyframes downloadFireBreath { 0% { filter: brightness(0.98) saturate(1.1); } 50% { filter: brightness(1.12) saturate(1.35); } 100% { filter: brightness(0.98) saturate(1.1); } } /* Lửa chuyển động */ @keyframes downloadFireMove { 0% { transform: translateY(4px) scaleX(1); opacity: 0.55; } 100% { transform: translateY(-2px) scaleX(1.08); opacity: 0.85; } } /* ================================= */ /* MODAL TẢI GAME - HOÀNG KIM VIP */ /* ================================= */ #downloadModal .modal-content { position: relative !important; overflow: hidden !important; max-width: 760px !important; padding: 24px 24px 20px !important; border-radius: 26px !important; background: radial-gradient(circle at 50% -20%, rgba(255, 224, 130, 0.28), transparent 42%), radial-gradient(circle at 10% 20%, rgba(255, 180, 60, 0.12), transparent 38%), radial-gradient(circle at 90% 80%, rgba(255, 120, 0, 0.12), transparent 42%), linear-gradient(180deg, rgba(24, 15, 3, 0.98), rgba(5, 3, 1, 0.98)) !important; border: 1px solid rgba(255, 220, 120, 0.95) !important; box-shadow: 0 0 0 1px rgba(80, 45, 0, 0.95), 0 0 22px rgba(255, 200, 80, 0.45), 0 0 55px rgba(255, 150, 0, 0.35), 0 30px 90px rgba(0, 0, 0, 0.95), inset 0 0 18px rgba(255, 230, 150, 0.08), inset 0 0 45px rgba(255, 170, 0, 0.07) !important; } /* Hào quang nền phía sau bảng */ #downloadModal .modal-content::before { content: "" !important; position: absolute !important; inset: -40% !important; z-index: 0 !important; background: conic-gradient( from 0deg, transparent, rgba(255, 210, 90, 0.18), transparent, rgba(255, 120, 0, 0.16), transparent ) !important; animation: downloadGoldAuraSpin 7s linear infinite !important; pointer-events: none !important; } /* Viền trong sang trọng */ #downloadModal .modal-content::after { content: "" !important; position: absolute !important; inset: 10px !important; z-index: 0 !important; border-radius: 20px !important; border: 1px solid rgba(255, 230, 150, 0.35) !important; box-shadow: inset 0 0 12px rgba(255, 220, 120, 0.12), 0 0 18px rgba(255, 180, 60, 0.12) !important; pointer-events: none !important; } /* Đưa nội dung nổi lên trên hiệu ứng */ #downloadModal .modal-header, #downloadModal .download-group-title, #downloadModal .download-links, #downloadModal .modal-note, #downloadModal .modal-footer, #downloadModal p { position: relative !important; z-index: 2 !important; } /* Tiêu đề TẢI GAME MUTAILOC */ #downloadModal .modal-title { color: #fff4c2 !important; font-size: 17px !important; font-weight: 1000 !important; letter-spacing: 1px !important; text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 245, 190, 0.95), 0 0 13px rgba(255, 200, 70, 0.85), 0 0 24px rgba(255, 130, 0, 0.65) !important; } /* Nút đóng góc phải */ #downloadModal .modal-close { width: 32px !important; height: 32px !important; background: radial-gradient(circle, rgba(255, 220, 120, 0.18), rgba(0, 0, 0, 0.9)) !important; border: 1px solid #ffe082 !important; color: #fff2a8 !important; box-shadow: 0 0 8px rgba(255, 220, 120, 0.75), 0 0 18px rgba(255, 150, 0, 0.45) !important; } /* Dòng máy chủ */ #downloadModal .download-group-title { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 10px 0 12px !important; padding: 6px 12px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 210, 90, 0.18), rgba(80, 35, 0, 0.35)) !important; border: 1px solid rgba(255, 220, 120, 0.65) !important; color: #ffe9a6 !important; font-size: 14px !important; font-weight: 1000 !important; text-shadow: 0 2px 2px #000, 0 0 8px rgba(255, 210, 90, 0.75) !important; } /* Các dòng link tải */ #downloadModal .download-link { position: relative !important; overflow: hidden !important; min-height: 42px !important; padding: 10px 14px !important; margin-bottom: 8px !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(30, 18, 4, 0.98), rgba(5, 3, 1, 0.98)) !important; border: 1px solid rgba(255, 205, 90, 0.78) !important; color: #fff2c4 !important; font-weight: 900 !important; box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.18), inset 0 -8px 16px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.72), 0 0 10px rgba(255, 170, 0, 0.18) !important; text-shadow: 0 2px 2px #000, 0 0 5px rgba(255, 220, 130, 0.55) !important; } /* Vệt vàng nhỏ chạy trong từng dòng */ #downloadModal .download-link::before { content: "" !important; position: absolute !important; top: 0 !important; left: -80% !important; width: 45% !important; height: 100% !important; background: linear-gradient( 110deg, transparent, rgba(255, 230, 150, 0.28), transparent ) !important; animation: downloadLinkGoldShine 3s ease-in-out infinite !important; pointer-events: none !important; } /* Chữ bên phải của link */ #downloadModal .download-link span { color: #ffe59a !important; font-size: 12px !important; font-weight: 900 !important; text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 200, 70, 0.6) !important; } /* Hover từng dòng */ #downloadModal .download-link:hover { transform: translateY(-2px) !important; background: linear-gradient(180deg, rgba(72, 38, 5, 0.98), rgba(14, 6, 1, 0.98)) !important; border-color: rgba(255, 235, 160, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255, 245, 190, 0.25), 0 10px 24px rgba(0, 0, 0, 0.82), 0 0 15px rgba(255, 190, 70, 0.38), 0 0 28px rgba(255, 120, 0, 0.28) !important; } /* Ghi chú cảnh báo */ #downloadModal p, #downloadModal .modal-note { color: #fff0c8 !important; font-size: 13px !important; line-height: 1.45 !important; text-shadow: 0 2px 2px #000, 0 0 4px rgba(255, 180, 60, 0.45) !important; } /* Nút Đóng phía dưới */ #downloadModal .btn-ghost { min-width: 78px !important; padding: 9px 18px !important; border-radius: 999px !important; background: linear-gradient(180deg, #3a2104, #090501) !important; border: 1px solid #ffe082 !important; color: #fff2b2 !important; font-weight: 1000 !important; box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.22), 0 0 10px rgba(255, 220, 120, 0.55), 0 0 22px rgba(255, 140, 0, 0.35) !important; } #downloadModal .btn-ghost:hover { transform: translateY(-2px) scale(1.04) !important; background: linear-gradient(180deg, #6a3b05, #140800) !important; box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.35), 0 0 14px rgba(255, 230, 150, 0.8), 0 0 30px rgba(255, 130, 0, 0.48) !important; } /* Animation hào quang */ @keyframes downloadGoldAuraSpin { 0% { transform: rotate(0deg); opacity: 0.7; } 50% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0.7; } } /* Animation sáng link */ @keyframes downloadLinkGoldShine { 0% { left: -80%; opacity: 0; } 25% { opacity: 1; } 55% { left: 130%; opacity: 0; } 100% { left: 130%; opacity: 0; } } /* ================= MOBILE FIX ================= */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } .page, .main, .layout, .container, .wrapper, .content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .hero, .hero-wrap, .main-panel, .right-panel, .left-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .sidebar, .menu-box, .menu-panel { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px auto !important; } .site-shell, .site-container { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } img, video, canvas { max-width: 100% !important; } .modal-content { width: 95vw !important; max-width: 95vw !important; min-width: 0 !important; } } /* ================= MOBILE FIX ================= */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } .page, .main, .layout, .container, .wrapper, .content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .hero, .hero-wrap, .main-panel, .right-panel, .left-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .sidebar, .menu-box, .menu-panel { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px auto !important; } .site-shell, .site-container { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } img, video, canvas { max-width: 100% !important; } .modal-content { width: 95vw !important; max-width: 95vw !important; min-width: 0 !important; } }