/* GENUP App shell parity: TOOL-AUTO-SEO-CHATBOX/web/trang-chu.html + genup-ui/genup-premium. */
html[data-theme] body{--font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif;--font-display:"Oswald","Anton","Plus Jakarta Sans",Impact,sans-serif;--side-w:298px}
html[data-theme="dark"] body :is(.app-shell,.workspace,.content,.tool-section){background:#08090C!important}
html[data-theme="light"] body :is(.app-shell,.workspace,.content,.tool-section){background:#F4F6F9!important}
html[data-theme] body .sidebar{background:#0B0D11!important;border:0!important}
html[data-theme] body .brand-block{padding:22px 20px 18px;gap:12px;min-height:156px;height:auto}
html[data-theme] body .brand-logo{height:76px;width:auto;max-width:100%;object-fit:contain}
html[data-theme] body .brand-sub{font-family:var(--font-display);font-size:13px;letter-spacing:.22em;color:#93A0AC;margin:0}
html[data-theme] body .side-nav{display:flex;flex-direction:column;gap:2px;padding:14px 14px 10px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3B4149 transparent}
html[data-theme] body .nav-item{gap:12px;padding:9px 13px;border-radius:11px;min-height:42px;font-size:14px;line-height:1.65;font-weight:600;color:#CFD8E1}
html[data-theme] body .nav-item svg{width:19px;height:19px;stroke:#93A0AC;stroke-width:1.9}
html[data-theme] body .nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
html[data-theme] body .nav-item.active{background:rgba(219,25,32,.13);color:#fff}
html[data-theme] body .nav-item.active svg{stroke:#F0333A;filter:none}
html[data-theme] body .nav-section{font-size:10px;font-weight:700;letter-spacing:.18em;color:#93A0AC;padding:12px 12px 5px;margin-top:5px;line-height:1.65}
html[data-theme] body .genup-ecosystem-list .nav-item{padding-left:42px;font-size:13.5px;line-height:1.3}
html[data-theme] body .genup-ecosystem-list .nav-item svg{width:17px;height:17px}
html[data-theme] body .sidebar-bottom{position:static;flex:none;margin:0 14px 14px;padding:0;background:none!important;gap:14px}
html[data-theme] body .sidebar .plan-card{background:rgba(219,25,32,.13)!important;border:0!important;border-radius:15px;padding:13px 15px;min-height:69px;color:#F2F6FA!important}
html[data-theme] body .sidebar .profile-card{background:rgba(255,255,255,.04)!important;border:0!important;border-radius:15px;padding:15px;min-height:76px;gap:13px;color:#CFD8E1!important}
html[data-theme] body .sidebar :is(.plan-card,.profile-card) b{font-size:14px;font-weight:700;color:#CFD8E1!important}
html[data-theme] body .sidebar :is(.plan-card,.profile-card) small{font-size:12.5px;color:#93A0AC!important}
html[data-theme] body .avatar{width:42px;height:42px;border-radius:13px;font-size:17px;flex:none}
html[data-theme] body .topbar{min-height:76px;padding:0 44px;gap:14px;border:0!important;background:#0D1520!important;backdrop-filter:blur(22px) saturate(140%)}
html[data-theme] body :is(.topbar-left,.topbar-right){gap:12px;flex-wrap:nowrap}
html[data-theme] body .topbar :is(.top-chip,.icon-chip,select,input,button){font-family:var(--font-body)!important;font-size:12.5px!important;font-weight:600}
html[data-theme] body .topbar .top-chip{min-height:38px;height:38px;padding:8px 13px;gap:7px;border-radius:9px;background:#202833!important;color:#F2F6FA!important;white-space:nowrap}
html[data-theme] body .topbar .top-chip svg{width:15px;height:15px}
html[data-theme] body .topbar .icon-chip{height:42px;min-height:42px;width:42px;border-radius:12px;background:#202833!important;color:#CFD8E1!important;flex:none}
html[data-theme] body .topbar .icon-chip svg{width:20px;height:20px}
html[data-theme] body .topbar .genup-language{width:100px;min-width:100px;max-width:100px;height:42px;min-height:42px;background:#202833!important;color:#F2F6FA!important;border-radius:9px;padding:0 12px}
html[data-theme] body .activation{height:38px;min-width:0;background:#202833;border:0!important;border-radius:10px}
html[data-theme] body .topbar .activation input{min-height:38px;width:clamp(120px,17vw,270px);padding:9px 6px;font-weight:400}
html[data-theme] body .activation button{height:38px;min-height:38px;padding:9px 15px;font-size:12px!important;font-weight:800;white-space:nowrap}
html[data-theme] body .hero{padding:44px 44px 40px;background:radial-gradient(ellipse at 50% 54%,rgba(219,25,32,.15),rgba(77,166,255,.035) 36%,transparent 67%)!important}
html[data-theme] body .hero-title-panel{width:100%;min-height:0;height:auto;margin-top:20px;background:transparent!important;border:0!important;box-shadow:none}
html[data-theme] body .hero h1{font-family:var(--font-display);font-size:clamp(38px,5vw,72px);font-weight:400;line-height:1;letter-spacing:-.025em!important;white-space:normal}
html[data-theme] body .meta-pill{height:auto;padding:8px 17px;background:rgba(255,255,255,.055)!important;font-size:12px;font-weight:700;letter-spacing:.09em;line-height:1.65}
html[data-theme] body .brand-promise{height:auto;margin-top:16px;padding:10px 22px;border-radius:12px;font-size:clamp(15px,1.35vw,19px);line-height:1.4}
html[data-theme] body .hero-kicker{height:auto;margin-top:16px;padding:0;background:transparent!important;font-size:15px;line-height:1.5}
html[data-theme] body .content>.quick-tools{max-width:1252px;width:calc(100% - 88px);margin:0 auto;min-height:78px;border-radius:0;padding:20px 28px;background:#0D1520!important}
html[data-theme] body .quick-link{font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.4;text-transform:none}
@media(min-width:1081px){html[data-theme] body .app-shell{grid-template-columns:298px minmax(0,1fr)}}
@media(max-width:1550px){html[data-theme] body .topbar{padding:0 24px}html[data-theme] body :is(.topbar-left,.topbar-right){gap:8px}}
@media(max-width:1280px){html[data-theme] body .topbar{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}html[data-theme] body .topbar .activation input{width:120px}}
@media(max-width:1080px){html[data-theme] body .app-shell{grid-template-columns:minmax(0,1fr)}html[data-theme] body .sidebar{display:none}html[data-theme] body .hero{padding:32px 20px}html[data-theme] body .content>.quick-tools{width:calc(100% - 32px)}}
@media(max-width:680px){html[data-theme] body .topbar{padding:10px 12px;gap:8px}html[data-theme] body :is(.topbar-left,.topbar-right){flex-wrap:wrap;gap:6px}html[data-theme] body .hero h1{font-size:38px}html[data-theme] body .topbar .genup-language{width:100px}}
html[data-theme] body.khep-trai .app-shell{grid-template-columns:76px minmax(0,1fr)}
html[data-theme] body.vo-bung .app-shell{grid-template-columns:minmax(0,1fr)}
/* Brand caption follows the original display weight; accents remain red in both themes. */
html[data-theme] body .brand-sub{font-weight:400}
html[data-theme] body .hero h1 :is(em,strong){color:#F0333A!important;font-weight:500}

/* Home follows the main GENUP landing page; project controls belong inside tools. */
html[data-theme] body:has(.hero) .genup-tools-project-bar{display:none!important}
html[data-theme] body .hero{position:relative;overflow:hidden;background:#08090C!important}
html[data-theme] body .hero::before{content:"";position:absolute;left:50%;top:-180px;width:min(1100px,95vw);height:720px;transform:translateX(-50%);pointer-events:none;opacity:.96;background:radial-gradient(ellipse at center,rgba(219,25,32,.28),rgba(77,166,255,.10) 42%,transparent 70%)}
html[data-theme] body .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 72%)}
html[data-theme] body .hero>*{position:relative;z-index:1}
html[data-theme="light"] body .hero{background:linear-gradient(180deg,#EAF0F8,transparent)!important}