:root{--bg:#08090d;--panel:#11131a;--panel2:#171a23;--line:#2a2e3a;--text:#f7f7fb;--muted:#a8adbd;--yellow:#ffd329;--orange:#ff8a00;--pink:#ff4fad;--cyan:#23e6ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 30px));margin:0 auto}.bg-grid{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 20% 10%,rgba(255,211,41,.18),transparent 28%),radial-gradient(circle at 82% 20%,rgba(255,79,173,.14),transparent 26%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px}.site-header{position:sticky;top:0;z-index:20;background:rgba(8,9,13,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}.brand{display:flex;align-items:center;gap:12px}.brand img{width:70px;height:70px}.brand strong{display:block;font-size:22px;color:var(--yellow)}.brand small{color:var(--muted);text-transform:uppercase;font-size:12px}.nav{display:flex;gap:8px}.nav a{padding:10px 13px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-weight:800}.nav a:hover{color:#111;background:var(--yellow);box-shadow:0 0 26px rgba(255,211,41,.28)}.menu-btn{display:none;background:var(--yellow);border:0;border-radius:8px;padding:9px 12px;font-weight:900}
.hero{padding:72px 0 54px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:32px;align-items:center}.kicker{color:var(--yellow);font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:13px}.hero h1,.page-title h1,.detail h1{font-size:58px;line-height:1.05;margin:0 0 18px}.hero-copy>p:not(.kicker),.page-title p,.detail .lead{color:var(--muted);font-size:18px;max-width:760px}.search-panel{display:flex;gap:10px;margin:26px 0 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:0 18px 60px rgba(0,0,0,.35)}.search-panel input{flex:1;background:#090a10;border:1px solid var(--line);border-radius:8px;color:#fff;padding:14px;font-size:16px}.search-panel button,.cta{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111;border:0;border-radius:8px;padding:14px 18px;font-weight:900;display:inline-flex}.hot-tags{display:flex;gap:9px;flex-wrap:wrap}.hot-tags a{color:#111;background:var(--yellow);border-radius:999px;padding:7px 11px;font-weight:900;font-size:13px}.hero-orbit{position:relative;min-height:360px}.dude-card{background:linear-gradient(180deg,#202431,#11131a);border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 42px rgba(255,211,41,.12)}.main-card{position:absolute;inset:52px 34px auto 22px;animation:floatCard 4s ease-in-out infinite}.rank{display:inline-grid;place-items:center;width:56px;height:56px;background:var(--yellow);color:#111;border-radius:8px;font-size:24px;font-weight:900}.main-card h2{font-size:38px;margin:16px 0 8px}.main-card p{color:var(--muted)}.floating-chip{position:absolute;background:#0c0e14;border:1px solid var(--line);border-radius:999px;color:var(--text);font-weight:900;padding:11px 15px;box-shadow:0 0 26px rgba(35,230,255,.18)}.chip-a{right:0;top:22px;animation:pulseGlow 2.6s infinite}.chip-b{left:0;bottom:44px;animation:drift 5s infinite}.chip-c{right:26px;bottom:6px;animation:drift 4.2s infinite reverse}
.section{padding:60px 0}.section-title{text-align:center;margin-bottom:24px}.section-title h2{font-size:42px;margin:0}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.category-card,.article-card,.detail-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.category-card:before,.article-card:before{content:"";position:absolute;inset:auto -30% -42% -30%;height:80%;background:radial-gradient(circle,rgba(255,211,41,.16),transparent 68%);transition:transform .25s ease}.category-card:hover,.article-card:hover{transform:translateY(-6px);border-color:var(--yellow);box-shadow:0 18px 50px rgba(0,0,0,.38)}.category-card:hover:before,.article-card:hover:before{transform:translateY(-22px)}.badge{display:inline-flex;background:var(--yellow);color:#111;border-radius:6px;padding:4px 8px;font-weight:900}.category-card h3{font-size:25px;margin:14px 0 8px}.category-card p,.article-card p,.detail-box p,.detail li{color:var(--muted)}.category-card a,.article-card a,.back-link{color:var(--yellow);font-weight:900}.featured{background:linear-gradient(135deg,rgba(255,211,41,.12),rgba(255,79,173,.08));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.featured-layout{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:center}.review-panel h2{font-size:42px;margin:0 0 12px}.review-panel p{color:var(--muted)}.score-board{display:grid;grid-template-columns:1fr;gap:12px}.score-board div{background:#0c0e14;border:1px solid var(--line);border-radius:10px;padding:18px}.score-board strong{display:block;color:var(--yellow);font-size:42px}.score-board span{color:var(--muted);font-weight:800}.site-footer{border-top:1px solid var(--line);padding:38px 0;background:#07080b}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:24px}.site-footer h2,.site-footer h3{color:var(--yellow);margin:0 0 12px}.site-footer p,.site-footer a{color:var(--muted);display:block;margin:6px 0}.page-main{padding:54px 0}.page-title{margin-bottom:28px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-card span{color:var(--yellow);font-size:34px;font-weight:900}.article-card h2{font-size:25px;line-height:1.2}.detail{max-width:900px}.detail h1{font-size:50px}.detail-box{margin:24px 0}.detail-box h2{margin-top:0}.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}@keyframes pulseGlow{0%,100%{box-shadow:0 0 18px rgba(255,211,41,.2)}50%{box-shadow:0 0 38px rgba(255,211,41,.58)}}@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@media(max-width:900px){.hero-grid,.featured-layout,.footer-grid{grid-template-columns:1fr}.category-grid,.article-grid{grid-template-columns:1fr 1fr}.hero h1,.detail h1{font-size:42px}.nav{display:none;position:absolute;left:15px;right:15px;top:88px;background:#090a10;border:1px solid var(--line);border-radius:10px;padding:10px;grid-template-columns:1fr}.nav.open{display:grid}.menu-btn{display:block}}
@media(max-width:620px){.category-grid,.article-grid{grid-template-columns:1fr}.hero h1,.page-title h1,.detail h1{font-size:34px}.search-panel{display:grid}.hero-orbit{min-height:300px}.main-card{inset:34px 0 auto}.brand img{width:56px;height:56px}}

.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.case-card{position:relative;min-height:360px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.28);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.case-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05);transition:transform .5s ease,filter .25s ease}.case-card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,13,.12),rgba(8,9,13,.9))}.case-card div{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px}.case-card span{display:inline-flex;background:var(--yellow);color:#111;border-radius:6px;padding:4px 8px;font-weight:900;font-size:12px}.case-card h3{font-size:23px;margin:10px 0 6px}.case-card p{color:var(--muted);margin:0}.case-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--yellow);box-shadow:0 24px 68px rgba(0,0,0,.42),0 0 34px rgba(255,211,41,.18)}.case-card:hover img{transform:scale(1.1);filter:saturate(1.3) contrast(1.12)}
@media(max-width:900px){.case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.case-grid{grid-template-columns:1fr}.case-card{min-height:320px}}

/* Light theme override */
:root{--bg:#f7f8fb;--panel:#ffffff;--panel2:#f1f3f7;--line:#dfe3ea;--text:#111827;--muted:#5f6878;--yellow:#ffd329;--orange:#ff8a00;--pink:#e83e8c;--cyan:#0ea5e9}
body{background:var(--bg);color:var(--text)}.bg-grid{background:radial-gradient(circle at 15% 8%,rgba(255,211,41,.26),transparent 28%),radial-gradient(circle at 84% 18%,rgba(14,165,233,.15),transparent 26%),linear-gradient(rgba(17,24,39,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,39,.045) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px}.site-header{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(17,24,39,.08)}.brand strong,.site-footer h2,.site-footer h3{color:#111827}.brand small,.nav a,.hero-copy>p:not(.kicker),.page-title p,.detail .lead,.category-card p,.article-card p,.detail-box p,.detail li,.review-panel p,.score-board span,.site-footer p,.site-footer a,.case-card p{color:var(--muted)}.nav a{background:#fff}.nav a:hover{color:#111;background:var(--yellow);box-shadow:0 0 24px rgba(255,211,41,.35)}.search-panel,.dude-card,.category-card,.article-card,.detail-box,.score-board div{background:#fff;border-color:var(--line);box-shadow:0 18px 40px rgba(17,24,39,.08)}.search-panel input{background:#f9fafb;color:#111827;border-color:var(--line)}.hot-tags a,.badge,.case-card span{color:#111827}.main-card p{color:var(--muted)}.floating-chip{background:#fff;color:#111827;border-color:var(--line);box-shadow:0 12px 30px rgba(17,24,39,.08)}.featured{background:linear-gradient(135deg,rgba(255,211,41,.24),rgba(14,165,233,.08));border-color:var(--line)}.site-footer{background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(17,24,39,.04)}.case-card{background:#fff;border-color:var(--line);box-shadow:0 18px 40px rgba(17,24,39,.1)}.case-card:before{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(17,24,39,.74))}.case-card h3{color:#fff}.case-card:hover{box-shadow:0 24px 58px rgba(17,24,39,.18),0 0 34px rgba(255,211,41,.22)}.category-card:hover,.article-card:hover{box-shadow:0 20px 45px rgba(17,24,39,.14)}.nav.open{background:#fff}

.fixed-contact{position:fixed;right:22px;bottom:22px;z-index:60;display:grid;gap:10px}.fixed-contact a{display:flex;align-items:center;gap:10px;min-width:156px;padding:11px 13px;border-radius:999px;color:#fff;font-weight:900;box-shadow:0 14px 34px rgba(17,24,39,.24);transition:transform .2s ease,box-shadow .2s ease}.fixed-contact a:hover{transform:translateX(-6px);box-shadow:0 18px 42px rgba(17,24,39,.34)}.fixed-contact span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);font-size:20px;font-weight:900}.fixed-contact .phone{background:linear-gradient(135deg,#ff8a00,#ff3d00);animation:contactPulse 2.2s infinite}.fixed-contact .zalo{background:linear-gradient(135deg,#0ea5e9,#0068ff)}.fixed-contact .facebook{background:linear-gradient(135deg,#1877f2,#0b4db3)}@keyframes contactPulse{0%,100%{box-shadow:0 14px 34px rgba(255,138,0,.28)}50%{box-shadow:0 14px 44px rgba(255,61,0,.55)}}@media(max-width:620px){.fixed-contact{left:12px;right:12px;bottom:12px;grid-template-columns:repeat(3,1fr);gap:8px}.fixed-contact a{min-width:0;justify-content:center;border-radius:12px;padding:10px 8px}.fixed-contact strong{display:none}.fixed-contact span{width:32px;height:32px}}

.site-header{background:linear-gradient(135deg,#ffd329,#ffb800);border-bottom:1px solid #e6a700;box-shadow:0 10px 28px rgba(255,184,0,.25)}.brand strong{color:#111827}.brand small{color:#3f2f00}.nav a{background:rgba(255,255,255,.72);border-color:rgba(17,24,39,.18);color:#111827}.nav a:hover{background:#111827;color:#ffd329;box-shadow:0 0 22px rgba(17,24,39,.22)}.menu-btn{background:#111827;color:#ffd329}.nav.open{background:#ffd329}

.banner-slider{position:relative;min-height:calc(100vh - 99px);overflow:hidden;background:#111827}.banner-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .75s ease,visibility .75s ease}.banner-slide.active{opacity:1;visibility:visible}.banner-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease}.banner-slide.active img{transform:scale(1)}.banner-slide:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,24,39,.78),rgba(17,24,39,.38),rgba(255,211,41,.12))}.banner-content{position:relative;z-index:2;width:min(1180px,calc(100% - 30px));margin:0 auto;min-height:calc(100vh - 99px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:70px 0}.banner-content span{display:inline-flex;background:var(--yellow);color:#111827;border-radius:8px;padding:7px 11px;font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:13px}.banner-content h1{font-size:72px;line-height:1.02;max-width:820px;margin:18px 0;color:#fff;text-shadow:0 8px 28px rgba(0,0,0,.35)}.banner-content p{font-size:21px;color:#f3f4f6;max-width:650px;margin:0 0 26px}.banner-content a{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111827;border-radius:8px;padding:14px 20px;font-weight:900;box-shadow:0 18px 42px rgba(0,0,0,.28)}.banner-nav{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:54px;height:54px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:42px;line-height:1;cursor:pointer;backdrop-filter:blur(10px)}.banner-nav:hover{background:var(--yellow);color:#111827}.banner-nav.prev{left:24px}.banner-nav.next{right:24px}.banner-dots{position:absolute;left:50%;bottom:28px;z-index:4;transform:translateX(-50%);display:flex;gap:10px}.banner-dots span{width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.38);overflow:hidden}.banner-dots span.active{background:var(--yellow);animation:dotFill 5s linear infinite}@keyframes dotFill{0%{box-shadow:inset -44px 0 0 rgba(17,24,39,.45)}100%{box-shadow:inset 0 0 0 rgba(17,24,39,.45)}}@media(max-width:900px){.banner-content h1{font-size:52px}.banner-nav{display:none}}@media(max-width:620px){.banner-slider,.banner-content{min-height:620px}.banner-content{padding:54px 0}.banner-content h1{font-size:38px}.banner-content p{font-size:17px}.banner-dots span{width:30px}}