*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.ulis-landing .pointer-events-none{pointer-events:none}.ulis-landing .absolute{position:absolute}.ulis-landing .relative{position:relative}.ulis-landing .sticky{position:sticky}.ulis-landing .bottom-4{bottom:16px}.ulis-landing .left-1\/2{left:50%}.ulis-landing .left-3{left:12px}.ulis-landing .left-4{left:16px}.ulis-landing .right-10{right:40px}.ulis-landing .right-2{right:8px}.ulis-landing .right-4{right:16px}.ulis-landing .top-0{top:0}.ulis-landing .top-10{top:40px}.ulis-landing .top-2{top:8px}.ulis-landing .top-20{top:80px}.ulis-landing .top-3{top:12px}.ulis-landing .top-4{top:16px}.ulis-landing .-z-10{z-index:-10}.ulis-landing .z-40{z-index:40}.ulis-landing .mx-auto{margin-left:auto;margin-right:auto}.ulis-landing .mb-1\.5{margin-bottom:6px}.ulis-landing .mb-2{margin-bottom:8px}.ulis-landing .mb-3{margin-bottom:12px}.ulis-landing .mb-4{margin-bottom:16px}.ulis-landing .mb-5{margin-bottom:20px}.ulis-landing .mb-6{margin-bottom:24px}.ulis-landing .mb-8{margin-bottom:32px}.ulis-landing .ml-0\.5{margin-left:2px}.ulis-landing .ml-1{margin-left:4px}.ulis-landing .mr-2{margin-right:8px}.ulis-landing .mt-1{margin-top:4px}.ulis-landing .mt-12{margin-top:48px}.ulis-landing .mt-2{margin-top:8px}.ulis-landing .mt-3{margin-top:12px}.ulis-landing .mt-3\.5{margin-top:14px}.ulis-landing .mt-4{margin-top:16px}.ulis-landing .mt-6{margin-top:24px}.ulis-landing .mt-8{margin-top:32px}.ulis-landing .mt-auto{margin-top:auto}.ulis-landing .line-clamp-2{-webkit-line-clamp:2}.ulis-landing .line-clamp-2,.ulis-landing .line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.ulis-landing .line-clamp-3{-webkit-line-clamp:3}.ulis-landing .block{display:block}.ulis-landing .inline-block{display:inline-block}.ulis-landing .flex{display:flex}.ulis-landing .inline-flex{display:inline-flex}.ulis-landing .grid{display:grid}.ulis-landing .hidden{display:none}.ulis-landing .aspect-\[16\/8\]{aspect-ratio:16/8}.ulis-landing .aspect-\[16\/9\]{aspect-ratio:16/9}.ulis-landing .h-1\.5{height:6px}.ulis-landing .h-10{height:40px}.ulis-landing .h-2{height:8px}.ulis-landing .h-20{height:80px}.ulis-landing .h-4{height:16px}.ulis-landing .h-5{height:20px}.ulis-landing .h-6{height:24px}.ulis-landing .h-72{height:288px}.ulis-landing .h-8{height:32px}.ulis-landing .h-9{height:36px}.ulis-landing .h-\[300px\]{height:300px}.ulis-landing .h-full{height:100%}.ulis-landing .min-h-screen{min-height:100vh}.ulis-landing .w-1\.5{width:6px}.ulis-landing .w-10{width:40px}.ulis-landing .w-2{width:8px}.ulis-landing .w-4{width:16px}.ulis-landing .w-5{width:20px}.ulis-landing .w-72{width:288px}.ulis-landing .w-8{width:32px}.ulis-landing .w-9{width:36px}.ulis-landing .w-\[700px\]{width:700px}.ulis-landing .w-auto{width:auto}.ulis-landing .w-full{width:100%}.ulis-landing .w-px{width:1px}.ulis-landing .min-w-0{min-width:0}.ulis-landing .max-w-2xl{max-width:672px}.ulis-landing .max-w-3xl{max-width:768px}.ulis-landing .max-w-4xl{max-width:896px}.ulis-landing .max-w-7xl{max-width:1280px}.ulis-landing .max-w-xl{max-width:576px}.ulis-landing .flex-1{flex:1 1 0%}.ulis-landing .shrink-0{flex-shrink:0}.ulis-landing .-translate-x-1\/2{--tw-translate-x:-50%}.ulis-landing .-translate-x-1\/2,.ulis-landing .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.ulis-landing .animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.ulis-landing .cursor-pointer{cursor:pointer}.ulis-landing .scroll-mt-24{scroll-margin-top:96px}.ulis-landing .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.ulis-landing .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ulis-landing .flex-col{flex-direction:column}.ulis-landing .flex-wrap{flex-wrap:wrap}.ulis-landing .items-start{align-items:flex-start}.ulis-landing .items-center{align-items:center}.ulis-landing .justify-center{justify-content:center}.ulis-landing .justify-between{justify-content:space-between}.ulis-landing .gap-10{gap:40px}.ulis-landing .gap-2{gap:8px}.ulis-landing .gap-3{gap:12px}.ulis-landing .gap-4{gap:16px}.ulis-landing .gap-7{gap:28px}.ulis-landing .gap-8{gap:32px}.ulis-landing :is(.-space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(-8px*var(--tw-space-x-reverse));margin-left:calc(-8px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-1>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(4px*var(--tw-space-x-reverse));margin-left:calc(4px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-1\.5>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(6px*var(--tw-space-x-reverse));margin-left:calc(6px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(8px*var(--tw-space-x-reverse));margin-left:calc(8px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-2\.5>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(10px*var(--tw-space-x-reverse));margin-left:calc(10px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-3>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(12px*var(--tw-space-x-reverse));margin-left:calc(12px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-x-4>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(16px*var(--tw-space-x-reverse));margin-left:calc(16px*(1 - var(--tw-space-x-reverse)))}.ulis-landing :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(8px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(8px*var(--tw-space-y-reverse))}.ulis-landing :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(12px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(12px*var(--tw-space-y-reverse))}.ulis-landing :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(16px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(16px*var(--tw-space-y-reverse))}.ulis-landing :is(.space-y-6>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(24px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(24px*var(--tw-space-y-reverse))}.ulis-landing .overflow-hidden{overflow:hidden}.ulis-landing .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ulis-landing .rounded{border-radius:4px}.ulis-landing .rounded-2xl{border-radius:16px}.ulis-landing .rounded-3xl{border-radius:24px}.ulis-landing .rounded-full{border-radius:9999px}.ulis-landing .rounded-lg{border-radius:8px}.ulis-landing .rounded-xl{border-radius:12px}.ulis-landing .border{border-width:1px}.ulis-landing .border-0{border-width:0}.ulis-landing .border-b{border-bottom-width:1px}.ulis-landing .border-t{border-top-width:1px}.ulis-landing .border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.ulis-landing .border-blue-200\/80{border-color:rgba(191,219,254,.8)}.ulis-landing .border-blue-200\/90{border-color:rgba(191,219,254,.9)}.ulis-landing .border-cyan-400\/40{border-color:rgba(34,211,238,.4)}.ulis-landing .border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.ulis-landing .border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.ulis-landing .border-slate-200\/60{border-color:rgba(226,232,240,.6)}.ulis-landing .border-slate-200\/70{border-color:rgba(226,232,240,.7)}.ulis-landing .border-slate-200\/80{border-color:rgba(226,232,240,.8)}.ulis-landing .border-slate-200\/90{border-color:rgba(226,232,240,.9)}.ulis-landing .border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.ulis-landing .border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.ulis-landing .bg-\[\#f8faff\]{--tw-bg-opacity:1;background-color:rgb(248 250 255/var(--tw-bg-opacity,1))}.ulis-landing .bg-academic-navy\/90{background-color:rgba(11,27,61,.9)}.ulis-landing .bg-academic-royal{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing .bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.ulis-landing .bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.ulis-landing .bg-amber-600\/70{background-color:rgba(217,119,6,.7)}.ulis-landing .bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.ulis-landing .bg-blue-400\/15{background-color:rgba(96,165,250,.15)}.ulis-landing .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.ulis-landing .bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing .bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.ulis-landing .bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity,1))}.ulis-landing .bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.ulis-landing .bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.ulis-landing .bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.ulis-landing .bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.ulis-landing .bg-navy-950{--tw-bg-opacity:1;background-color:rgb(6 13 31/var(--tw-bg-opacity,1))}.ulis-landing .bg-navy-950\/80{background-color:rgba(6,13,31,.8)}.ulis-landing .bg-navy-950\/85{background-color:rgba(6,13,31,.85)}.ulis-landing .bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.ulis-landing .bg-purple-700{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.ulis-landing .bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.ulis-landing .bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.ulis-landing .bg-sky-300\/20{background-color:rgba(125,211,252,.2)}.ulis-landing .bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.ulis-landing .bg-slate-100\/70{background-color:rgba(241,245,249,.7)}.ulis-landing .bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.ulis-landing .bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.ulis-landing .bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.ulis-landing .bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.ulis-landing .bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.ulis-landing .bg-transparent{background-color:transparent}.ulis-landing .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.ulis-landing .bg-white\/90{background-color:hsla(0,0%,100%,.9)}.ulis-landing .bg-white\/95{background-color:hsla(0,0%,100%,.95)}.ulis-landing .bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.ulis-landing .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.ulis-landing .from-academic-blue{--tw-gradient-from:#1e3a8a var(--tw-gradient-from-position);--tw-gradient-to:rgba(30,58,138,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.ulis-landing .from-blue-700{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,78,216,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.ulis-landing .from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.ulis-landing .via-academic-royal{--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.ulis-landing .via-indigo-600{--tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#4f46e5 var(--tw-gradient-via-position),var(--tw-gradient-to)}.ulis-landing .to-academic-royal{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.ulis-landing .to-blue-50\/40{--tw-gradient-to:rgba(239,246,255,.4) var(--tw-gradient-to-position)}.ulis-landing .to-sky-500{--tw-gradient-to:#0ea5e9 var(--tw-gradient-to-position)}.ulis-landing .bg-clip-text{-webkit-background-clip:text;background-clip:text}.ulis-landing .object-contain{-o-object-fit:contain;object-fit:contain}.ulis-landing .object-cover{-o-object-fit:cover;object-fit:cover}.ulis-landing .p-0{padding:0}.ulis-landing .p-1\.5{padding:6px}.ulis-landing .p-2{padding:8px}.ulis-landing .p-3{padding:12px}.ulis-landing .p-4{padding:16px}.ulis-landing .p-5{padding:20px}.ulis-landing .p-6{padding:24px}.ulis-landing .px-2{padding-left:8px;padding-right:8px}.ulis-landing .px-2\.5{padding-left:10px;padding-right:10px}.ulis-landing .px-3{padding-left:12px;padding-right:12px}.ulis-landing .px-3\.5{padding-left:14px;padding-right:14px}.ulis-landing .px-4{padding-left:16px;padding-right:16px}.ulis-landing .px-5{padding-left:20px;padding-right:20px}.ulis-landing .px-6{padding-left:24px;padding-right:24px}.ulis-landing .py-0\.5{padding-top:2px;padding-bottom:2px}.ulis-landing .py-1{padding-top:4px;padding-bottom:4px}.ulis-landing .py-1\.5{padding-top:6px;padding-bottom:6px}.ulis-landing .py-16{padding-top:64px;padding-bottom:64px}.ulis-landing .py-2{padding-top:8px;padding-bottom:8px}.ulis-landing .py-2\.5{padding-top:10px;padding-bottom:10px}.ulis-landing .py-3{padding-top:12px;padding-bottom:12px}.ulis-landing .pb-12{padding-bottom:48px}.ulis-landing .pb-16{padding-bottom:64px}.ulis-landing .pb-2{padding-bottom:8px}.ulis-landing .pb-3{padding-bottom:12px}.ulis-landing .pl-3{padding-left:12px}.ulis-landing .pt-1{padding-top:4px}.ulis-landing .pt-10{padding-top:40px}.ulis-landing .pt-16{padding-top:64px}.ulis-landing .pt-2\.5{padding-top:10px}.ulis-landing .pt-3{padding-top:12px}.ulis-landing .pt-4{padding-top:16px}.ulis-landing .text-center{text-align:center}.ulis-landing .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.ulis-landing .font-sans{font-family:Plus Jakarta Sans,sans-serif}.ulis-landing .font-serif_script{font-family:Playfair Display,serif}.ulis-landing .text-2xl{font-size:24px;line-height:32px}.ulis-landing .text-3xl{font-size:30px;line-height:36px}.ulis-landing .text-\[10px\]{font-size:10px}.ulis-landing .text-\[11px\]{font-size:11px}.ulis-landing .text-\[14px\]{font-size:14px}.ulis-landing .text-\[15px\]{font-size:15px}.ulis-landing .text-\[16px\]{font-size:16px}.ulis-landing .text-\[18px\]{font-size:18px}.ulis-landing .text-\[20px\]{font-size:20px}.ulis-landing .text-\[22px\]{font-size:22px}.ulis-landing .text-\[9px\]{font-size:9px}.ulis-landing .text-base{font-size:16px;line-height:24px}.ulis-landing .text-sm{font-size:14px;line-height:20px}.ulis-landing .text-xl{font-size:20px;line-height:28px}.ulis-landing .text-xs{font-size:12px;line-height:16px}.ulis-landing .font-black{font-weight:900}.ulis-landing .font-bold{font-weight:700}.ulis-landing .font-extrabold{font-weight:800}.ulis-landing .font-medium{font-weight:500}.ulis-landing .font-semibold{font-weight:600}.ulis-landing .uppercase{text-transform:uppercase}.ulis-landing .italic{font-style:italic}.ulis-landing .leading-\[1\.25\]{line-height:1.25}.ulis-landing .leading-relaxed{line-height:1.625}.ulis-landing .leading-snug{line-height:1.375}.ulis-landing .tracking-tight{letter-spacing:-.025em}.ulis-landing .tracking-wide{letter-spacing:.025em}.ulis-landing .tracking-wider{letter-spacing:.05em}.ulis-landing .text-academic-blue{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.ulis-landing .text-academic-royal{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.ulis-landing .text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.ulis-landing .text-cyan-300{--tw-text-opacity:1;color:rgb(103 232 249/var(--tw-text-opacity,1))}.ulis-landing .text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.ulis-landing .text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.ulis-landing .text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.ulis-landing .text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.ulis-landing .text-navy-950{--tw-text-opacity:1;color:rgb(6 13 31/var(--tw-text-opacity,1))}.ulis-landing .text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.ulis-landing .text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.ulis-landing .text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.ulis-landing .text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.ulis-landing .text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.ulis-landing .text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.ulis-landing .text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.ulis-landing .text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.ulis-landing .text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.ulis-landing .text-transparent{color:transparent}.ulis-landing .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ulis-landing .placeholder-slate-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(148 163 184/var(--tw-placeholder-opacity,1))}.ulis-landing .placeholder-slate-400::placeholder{--tw-placeholder-opacity:1;color:rgb(148 163 184/var(--tw-placeholder-opacity,1))}.ulis-landing .shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.ulis-landing .shadow,.ulis-landing .shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ulis-landing .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.ulis-landing .shadow-card-glass{--tw-shadow:0 10px 30px -10px rgba(14,30,70,.08),inset 0 1px 0 hsla(0,0%,100%,.8);--tw-shadow-colored:0 10px 30px -10px var(--tw-shadow-color),inset 0 1px 0 var(--tw-shadow-color)}.ulis-landing .shadow-card-glass,.ulis-landing .shadow-glow-blue{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ulis-landing .shadow-glow-blue{--tw-shadow:0 0 25px -4px rgba(37,99,235,.5);--tw-shadow-colored:0 0 25px -4px var(--tw-shadow-color)}.ulis-landing .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.ulis-landing .shadow-md,.ulis-landing .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ulis-landing .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.ulis-landing .outline{outline-style:solid}.ulis-landing .ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ulis-landing .ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.ulis-landing .blur-2xl{--tw-blur:blur(40px)}.ulis-landing .blur-2xl,.ulis-landing .blur-3xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.ulis-landing .blur-3xl{--tw-blur:blur(64px)}.ulis-landing .backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.ulis-landing .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ulis-landing .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ulis-landing .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ulis-landing .duration-300{transition-duration:.3s}.ulis-landing .duration-500{transition-duration:.5s}.ulis-landing{font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5;color:#1e293b;text-align:left;-webkit-font-smoothing:antialiased}.ulis-landing *,.ulis-landing :after,.ulis-landing :before{box-sizing:border-box;border:0 solid #e5e7eb}.ulis-landing h1,.ulis-landing h2,.ulis-landing h3,.ulis-landing h4,.ulis-landing h5,.ulis-landing h6{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}.ulis-landing figure,.ulis-landing ol,.ulis-landing p,.ulis-landing ul{margin:0}.ulis-landing ol,.ulis-landing ul{padding:0;list-style:none}.ulis-landing a,.ulis-landing a:focus,.ulis-landing a:hover{color:inherit;text-decoration:inherit;background:transparent}.ulis-landing img{display:block;max-width:100%}.ulis-landing button,.ulis-landing input,.ulis-landing textarea{font:inherit;color:inherit;letter-spacing:inherit;margin:0}.ulis-landing button{padding:0;background:transparent;cursor:pointer;line-height:inherit}.ulis-landing textarea{resize:vertical}.ulis-landing label{display:inline-block;max-width:none;margin:0;font-weight:inherit}.ulis-landing strong{font-weight:700}.ulis-landing em{font-style:italic}.ulis-landing :focus-visible:not(input):not(textarea){outline:2px solid #2563eb!important;outline-offset:2px}.ulis-landing input:focus-visible,.ulis-landing textarea:focus-visible{outline:none!important}.ulis-landing .glass-frosted-nav{background:hsla(0,0%,100%,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.ulis-landing .relo-hero-bg{background:radial-gradient(ellipse at 50% -10%,rgba(37,99,235,.18) 0,transparent 60%),radial-gradient(ellipse at 85% 30%,rgba(56,189,248,.12) 0,transparent 50%),radial-gradient(ellipse at 15% 40%,rgba(30,58,138,.08) 0,transparent 50%),#f8faff}dialog.ulis-dialog{width:100%;max-width:min(448px,calc(100vw - 32px));padding:0;border:0;background:transparent;overflow:visible;color:#1e293b}dialog.ulis-dialog::backdrop{background:rgba(6,13,31,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ulis-landing .ulis-login-msg{display:block;margin-bottom:16px;padding:9.6px 12.8px;border:1px solid #fecaca;border-radius:12px;background:#fef2f2;color:#b91c1c;font-size:13px;line-height:1.4}.ulis-landing .ulis-login-msg:empty{display:none}.ulis-landing .ulis-login-msg.alert-success{border-color:#a7f3d0;background:#ecfdf5;color:#047857}.ulis-landing .btn-loading{position:relative;color:transparent!important;pointer-events:none}.ulis-landing .btn-loading:after{content:"";position:absolute;inset:0;margin:auto;width:18.4px;height:18.4px;border:2px solid hsla(0,0%,100%,.5);border-top-color:#fff;border-radius:9999px;animation:ulis-spin .7s linear infinite}@keyframes ulis-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.ulis-landing *,.ulis-landing :after,.ulis-landing :before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.ulis-landing :is(.selection\:bg-academic-royal *)::-moz-selection{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing :is(.selection\:bg-academic-royal *)::selection{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing :is(.selection\:text-white *)::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing :is(.selection\:text-white *)::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing .selection\:bg-academic-royal::-moz-selection{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing .selection\:bg-academic-royal::selection{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing .selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing .selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing .hover\:-translate-y-1:hover{--tw-translate-y:-4px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ulis-landing .hover\:border-academic-royal:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.ulis-landing .hover\:border-academic-royal\/40:hover{border-color:rgba(37,99,235,.4)}.ulis-landing .hover\:bg-academic-blue:hover{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.ulis-landing .hover\:bg-academic-royal:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.ulis-landing .hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.ulis-landing .hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.ulis-landing .hover\:bg-slate-200\/60:hover{background-color:rgba(226,232,240,.6)}.ulis-landing .hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.ulis-landing .hover\:bg-white\/60:hover{background-color:hsla(0,0%,100%,.6)}.ulis-landing .hover\:text-academic-blue:hover{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.ulis-landing .hover\:text-academic-royal:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.ulis-landing .hover\:text-slate-300:hover{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.ulis-landing .hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.ulis-landing .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.ulis-landing .hover\:underline:hover{text-decoration-line:underline}.ulis-landing .hover\:shadow-glow-blue:hover{--tw-shadow:0 0 25px -4px rgba(37,99,235,.5);--tw-shadow-colored:0 0 25px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ulis-landing .hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.ulis-landing .focus\:border-academic-royal:focus{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.ulis-landing .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.ulis-landing .focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.ulis-landing .focus\:ring-0:focus,.ulis-landing .focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ulis-landing .focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ulis-landing .focus\:ring-academic-royal\/30:focus{--tw-ring-color:rgba(37,99,235,.3)}.ulis-landing .focus\:ring-academic-royal\/40:focus{--tw-ring-color:rgba(37,99,235,.4)}.ulis-landing .active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}.ulis-landing .active\:scale-95:active,.ulis-landing .active\:scale-\[0\.99\]:active{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ulis-landing .active\:scale-\[0\.99\]:active{--tw-scale-x:0.99;--tw-scale-y:0.99}.ulis-landing :is(.group:hover .group-hover\:translate-x-1){--tw-translate-x:4px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ulis-landing :is(.group:hover .group-hover\:scale-105){--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ulis-landing :is(.group:hover .group-hover\:text-academic-blue){--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.ulis-landing :is(.group:hover .group-hover\:text-academic-royal){--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}@media not all and (min-width:1280px){.ulis-landing .max-xl\:hidden{display:none}}@media not all and (min-width:1024px){.ulis-landing .max-lg\:hidden{display:none}}@media not all and (min-width:640px){.ulis-landing .max-sm\:hidden{display:none}}@media (min-width:640px){.ulis-landing .sm\:h-11{height:44px}.ulis-landing .sm\:w-auto{width:auto}.ulis-landing .sm\:flex-row{flex-direction:row}.ulis-landing .sm\:items-center{align-items:center}.ulis-landing .sm\:gap-6{gap:24px}.ulis-landing :is(.sm\:space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(8px*var(--tw-space-x-reverse));margin-left:calc(8px*(1 - var(--tw-space-x-reverse)))}.ulis-landing .sm\:rounded-full{border-radius:9999px}.ulis-landing .sm\:p-3\.5{padding:14px}.ulis-landing .sm\:p-5{padding:20px}.ulis-landing .sm\:p-6{padding:24px}.ulis-landing .sm\:p-7{padding:28px}.ulis-landing .sm\:p-8{padding:32px}.ulis-landing .sm\:px-6{padding-left:24px;padding-right:24px}.ulis-landing .sm\:pl-4{padding-left:16px}.ulis-landing .sm\:text-2xl{font-size:24px;line-height:32px}.ulis-landing .sm\:text-3xl{font-size:30px;line-height:36px}.ulis-landing .sm\:text-4xl{font-size:36px;line-height:40px}.ulis-landing .sm\:text-base{font-size:16px;line-height:24px}.ulis-landing .sm\:text-sm{font-size:14px;line-height:20px}}@media (min-width:768px){.ulis-landing .md\:mt-0{margin-top:0}.ulis-landing .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ulis-landing .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ulis-landing .md\:flex-row{flex-direction:row}.ulis-landing .md\:items-end{align-items:flex-end}}@media (min-width:1024px){.ulis-landing .lg\:col-span-2{grid-column:span 2/span 2}.ulis-landing .lg\:col-span-3{grid-column:span 3/span 3}.ulis-landing .lg\:col-span-4{grid-column:span 4/span 4}.ulis-landing .lg\:col-span-8{grid-column:span 8/span 8}.ulis-landing .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.ulis-landing .lg\:px-8{padding-left:32px;padding-right:32px}.ulis-landing .lg\:pb-20{padding-bottom:80px}.ulis-landing .lg\:pt-14{padding-top:56px}.ulis-landing .lg\:text-5xl{font-size:48px;line-height:1}} /* ========================================================================== ULIS LANDING - CUSTOM STYLES (đã tách khỏi content.phtml) Scope theo body.ulis-active để đảm bảo luôn apply ========================================================================== */ /* -------------------------------------------------------------------------- PHẦN 1: TAILWIND UTILITIES BACKUP — SCOPE THEO body.ulis-active (Dùng để đảm bảo hoạt động ngay cả khi .ulis-landing wrapper bị remove) -------------------------------------------------------------------------- */ /* --- Display --- */ body.ulis-active .flex { display: flex !important; } body.ulis-active .inline-flex { display: inline-flex !important; } body.ulis-active .grid { display: grid !important; } body.ulis-active .block { display: block !important; } body.ulis-active .inline-block { display: inline-block !important; } body.ulis-active .hidden { display: none !important; } /* --- Flex --- */ body.ulis-active .flex-col { flex-direction: column !important; } body.ulis-active .flex-wrap { flex-wrap: wrap !important; } body.ulis-active .flex-1 { flex: 1 1 0% !important; } body.ulis-active .shrink-0 { flex-shrink: 0 !important; } body.ulis-active .items-center { align-items: center !important; } body.ulis-active .items-start { align-items: flex-start !important; } body.ulis-active .justify-center { justify-content: center !important; } body.ulis-active .justify-between { justify-content: space-between !important; } /* --- Gap --- */ body.ulis-active .gap-1 { gap: 4px !important; } body.ulis-active .gap-1\.5 { gap: 6px !important; } body.ulis-active .gap-2 { gap: 8px !important; } body.ulis-active .gap-3 { gap: 12px !important; } body.ulis-active .gap-4 { gap: 16px !important; } body.ulis-active .gap-7 { gap: 28px !important; } body.ulis-active .gap-8 { gap: 32px !important; } body.ulis-active .gap-10 { gap: 40px !important; } /* --- Space-x --- */ body.ulis-active .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 4px !important; } body.ulis-active .space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 6px !important; } body.ulis-active .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 8px !important; } body.ulis-active .space-x-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 10px !important; } body.ulis-active .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 12px !important; } body.ulis-active .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 16px !important; } /* --- Space-y --- */ body.ulis-active .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px !important; } body.ulis-active .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; } body.ulis-active .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px !important; } body.ulis-active .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px !important; } /* --- Position --- */ body.ulis-active .relative { position: relative !important; } body.ulis-active .absolute { position: absolute !important; } body.ulis-active .sticky { position: sticky !important; } body.ulis-active .top-0 { top: 0 !important; } body.ulis-active .top-3 { top: 12px !important; } body.ulis-active .top-4 { top: 16px !important; } body.ulis-active .right-3 { right: 12px !important; } body.ulis-active .left-3 { left: 12px !important; } body.ulis-active .left-4 { left: 16px !important; } body.ulis-active .inset-0 { inset: 0 !important; } body.ulis-active .z-40 { z-index: 40 !important; } /* --- Kích thước --- */ body.ulis-active .w-full { width: 100% !important; } body.ulis-active .w-auto { width: auto !important; } body.ulis-active .w-px { width: 1px !important; } body.ulis-active .w-2 { width: 8px !important; } body.ulis-active .w-5 { width: 20px !important; } body.ulis-active .w-7 { width: 28px !important; } body.ulis-active .w-10 { width: 40px !important; } body.ulis-active .h-2 { height: 8px !important; } body.ulis-active .h-5 { height: 20px !important; } body.ulis-active .h-6 { height: 24px !important; } body.ulis-active .h-7 { height: 28px !important; } body.ulis-active .h-8 { height: 32px !important; } body.ulis-active .h-9 { height: 36px !important; } body.ulis-active .h-10 { height: 40px !important; } body.ulis-active .h-20 { height: 80px !important; } body.ulis-active .h-full { height: 100% !important; } body.ulis-active .min-h-screen { min-height: 100vh !important; } body.ulis-active .min-w-0 { min-width: 0 !important; } /* --- Container --- */ body.ulis-active .max-w-7xl { max-width: 1280px !important; } body.ulis-active .mx-auto { margin-left: auto !important; margin-right: auto !important; } body.ulis-active .mt-auto { margin-top: auto !important; } /* --- Overflow & border radius --- */ body.ulis-active .overflow-hidden { overflow: hidden !important; } body.ulis-active .rounded-lg { border-radius: 8px !important; } body.ulis-active .rounded-xl { border-radius: 12px !important; } body.ulis-active .rounded-2xl { border-radius: 16px !important; } body.ulis-active .rounded-full { border-radius: 9999px !important; } /* --- Object & truncate --- */ body.ulis-active .object-cover { object-fit: cover !important; } body.ulis-active .object-contain { object-fit: contain !important; } body.ulis-active .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* --- Text align & transform --- */ body.ulis-active .text-center { text-align: center !important; } body.ulis-active .uppercase { text-transform: uppercase !important; } body.ulis-active .italic { font-style: italic !important; } body.ulis-active .font-sans { font-family: 'Plus Jakarta Sans', sans-serif !important; } body.ulis-active .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } body.ulis-active .antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* --- Font weight --- */ body.ulis-active .font-medium { font-weight: 500 !important; } body.ulis-active .font-semibold { font-weight: 600 !important; } body.ulis-active .font-bold { font-weight: 700 !important; } body.ulis-active .font-extrabold { font-weight: 800 !important; } body.ulis-active .font-black { font-weight: 900 !important; } /* --- Letter spacing --- */ body.ulis-active .tracking-tight { letter-spacing: -0.025em !important; } body.ulis-active .tracking-wide { letter-spacing: 0.025em !important; } body.ulis-active .tracking-wider { letter-spacing: 0.05em !important; } /* --- Font size --- */ body.ulis-active .text-\[10px\] { font-size: 10px !important; } body.ulis-active .text-\[11px\] { font-size: 11px !important; } body.ulis-active .text-\[14px\] { font-size: 14px !important; } body.ulis-active .text-\[15px\] { font-size: 15px !important; } body.ulis-active .text-\[16px\] { font-size: 16px !important; } body.ulis-active .text-\[17px\] { font-size: 17px !important; } body.ulis-active .text-\[18px\] { font-size: 18px !important; } body.ulis-active .text-\[20px\] { font-size: 20px !important; } body.ulis-active .text-\[22px\] { font-size: 22px !important; } body.ulis-active .text-xs { font-size: 12px !important; line-height: 16px !important; } body.ulis-active .text-sm { font-size: 14px !important; line-height: 20px !important; } body.ulis-active .text-base { font-size: 16px !important; line-height: 24px !important; } body.ulis-active .text-lg { font-size: 18px !important; line-height: 28px !important; } body.ulis-active .text-xl { font-size: 20px !important; line-height: 28px !important; } body.ulis-active .text-2xl { font-size: 24px !important; line-height: 32px !important; } body.ulis-active .text-3xl { font-size: 30px !important; line-height: 36px !important; } /* --- Line-height --- */ body.ulis-active .leading-snug { line-height: 1.375 !important; } body.ulis-active .leading-relaxed { line-height: 1.625 !important; } /* --- Text colors --- */ body.ulis-active .text-white { color: #fff !important; } body.ulis-active .text-slate-300 { color: #cbd5e1 !important; } body.ulis-active .text-slate-400 { color: #94a3b8 !important; } body.ulis-active .text-slate-500 { color: #64748b !important; } body.ulis-active .text-slate-600 { color: #475569 !important; } body.ulis-active .text-slate-700 { color: #334155 !important; } body.ulis-active .text-slate-800 { color: #1e293b !important; } body.ulis-active .text-emerald-500 { color: #10b981 !important; } body.ulis-active .text-emerald-600 { color: #059669 !important; } body.ulis-active .text-amber-500 { color: #f59e0b !important; } body.ulis-active .text-purple-700 { color: #7e22ce !important; } body.ulis-active .text-academic-blue { color: #1e3a8a !important; } body.ulis-active .text-academic-royal { color: #2563eb !important; } body.ulis-active .text-navy-950 { color: #060d1f !important; } body.ulis-active .text-cyan-400 { color: #22d3ee !important; } body.ulis-active .text-transparent { color: transparent !important; } /* --- Background --- */ body.ulis-active .bg-white { background-color: #fff !important; } body.ulis-active .bg-\[\#f8faff\] { background-color: #f8faff !important; } body.ulis-active .bg-slate-200 { background-color: #e2e8f0 !important; } body.ulis-active .bg-slate-300 { background-color: #cbd5e1 !important; } body.ulis-active .bg-slate-900 { background-color: #0f172a !important; } body.ulis-active .bg-navy-950 { background-color: #060d1f !important; } body.ulis-active .bg-blue-50 { background-color: #eff6ff !important; } body.ulis-active .bg-blue-100 { background-color: #dbeafe !important; } body.ulis-active .bg-blue-700 { background-color: #1d4ed8 !important; } body.ulis-active .bg-purple-50 { background-color: #faf5ff !important; } body.ulis-active .bg-purple-700 { background-color: #7e22ce !important; } body.ulis-active .bg-emerald-500 { background-color: #10b981 !important; } body.ulis-active .bg-amber-400 { background-color: #fbbf24 !important; } body.ulis-active .bg-amber-500 { background-color: #f59e0b !important; } body.ulis-active .bg-amber-600\/70 { background-color: rgba(217,119,6,0.7) !important; } body.ulis-active .bg-academic-royal { background-color: #2563eb !important; } body.ulis-active .bg-white\/95 { background-color: rgba(255,255,255,0.95) !important; } body.ulis-active .bg-white\/85 { background-color: rgba(255,255,255,0.85) !important; } body.ulis-active .bg-navy-950\/85 { background-color: rgba(6,13,31,0.85) !important; } body.ulis-active .bg-slate-100\/70 { background-color: rgba(241,245,249,0.7) !important; } body.ulis-active .bg-amber-500\/95 { background-color: rgba(245,158,11,0.95) !important; } /* --- Background gradient --- */ body.ulis-active .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops, #1e3a8a, #2563eb)) !important; } body.ulis-active .from-academic-blue { --tw-gradient-from: #1e3a8a !important; } body.ulis-active .via-academic-royal { --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to) !important; } body.ulis-active .to-academic-royal { --tw-gradient-to: #2563eb !important; } /* --- Border --- */ body.ulis-active .border { border-width: 1px !important; border-style: solid !important; } body.ulis-active .border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; } body.ulis-active .border-t { border-top-width: 1px !important; border-top-style: solid !important; } body.ulis-active .border-slate-100 { border-color: #f1f5f9 !important; } body.ulis-active .border-slate-200 { border-color: #e2e8f0 !important; } body.ulis-active .border-slate-200\/60 { border-color: rgba(226,232,240,0.6) !important; } body.ulis-active .border-slate-200\/70 { border-color: rgba(226,232,240,0.7) !important; } body.ulis-active .border-slate-200\/80 { border-color: rgba(226,232,240,0.8) !important; } body.ulis-active .border-slate-200\/90 { border-color: rgba(226,232,240,0.9) !important; } body.ulis-active .border-slate-300 { border-color: #cbd5e1 !important; } body.ulis-active .border-slate-800 { border-color: #1e293b !important; } body.ulis-active .border-blue-200\/80 { border-color: rgba(191,219,254,0.8) !important; } /* --- Padding --- */ body.ulis-active .p-1\.5 { padding: 6px !important; } body.ulis-active .p-2 { padding: 8px !important; } body.ulis-active .p-3 { padding: 12px !important; } body.ulis-active .p-4 { padding: 16px !important; } body.ulis-active .p-5 { padding: 20px !important; } body.ulis-active .p-6 { padding: 24px !important; } body.ulis-active .px-2 { padding-left: 8px !important; padding-right: 8px !important; } body.ulis-active .px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; } body.ulis-active .px-3 { padding-left: 12px !important; padding-right: 12px !important; } body.ulis-active .px-3\.5 { padding-left: 14px !important; padding-right: 14px !important; } body.ulis-active .px-4 { padding-left: 16px !important; padding-right: 16px !important; } body.ulis-active .px-5 { padding-left: 20px !important; padding-right: 20px !important; } body.ulis-active .px-6 { padding-left: 24px !important; padding-right: 24px !important; } body.ulis-active .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } body.ulis-active .py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; } body.ulis-active .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } body.ulis-active .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; } body.ulis-active .py-16 { padding-top: 64px !important; padding-bottom: 64px !important; } body.ulis-active .pt-1 { padding-top: 4px !important; } body.ulis-active .pt-2\.5 { padding-top: 10px !important; } body.ulis-active .pt-3 { padding-top: 12px !important; } body.ulis-active .pt-4 { padding-top: 16px !important; } body.ulis-active .pt-16 { padding-top: 64px !important; } body.ulis-active .pb-2 { padding-bottom: 8px !important; } body.ulis-active .pb-3 { padding-bottom: 12px !important; } body.ulis-active .pb-12 { padding-bottom: 48px !important; } /* --- Margin --- */ body.ulis-active .mb-1\.5 { margin-bottom: 6px !important; } body.ulis-active .mb-2 { margin-bottom: 8px !important; } body.ulis-active .mb-3 { margin-bottom: 12px !important; } body.ulis-active .mb-4 { margin-bottom: 16px !important; } body.ulis-active .mb-8 { margin-bottom: 32px !important; } body.ulis-active .mt-1 { margin-top: 4px !important; } body.ulis-active .mt-2 { margin-top: 8px !important; } body.ulis-active .mt-3 { margin-top: 12px !important; } body.ulis-active .mt-4 { margin-top: 16px !important; } body.ulis-active .mt-8 { margin-top: 32px !important; } body.ulis-active .ml-0\.5 { margin-left: 2px !important; } body.ulis-active .ml-1 { margin-left: 4px !important; } /* --- Grid responsive --- */ @media (min-width: 640px) { body.ulis-active .sm\:flex-row { flex-direction: row !important; } body.ulis-active .sm\:items-center { align-items: center !important; } body.ulis-active .sm\:h-11 { height: 44px !important; } body.ulis-active .sm\:text-2xl { font-size: 24px !important; line-height: 32px !important; } body.ulis-active .sm\:text-3xl { font-size: 30px !important; line-height: 36px !important; } body.ulis-active .sm\:p-5 { padding: 20px !important; } body.ulis-active .sm\:p-6 { padding: 24px !important; } body.ulis-active .sm\:p-7 { padding: 28px !important; } body.ulis-active .sm\:px-6 { padding-left: 24px !important; padding-right: 24px !important; } } @media (min-width: 768px) { body.ulis-active .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.ulis-active .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.ulis-active .md\:flex-row { flex-direction: row !important; } body.ulis-active .md\:items-end { align-items: flex-end !important; } body.ulis-active .md\:mt-0 { margin-top: 0 !important; } } @media (min-width: 1024px) { body.ulis-active .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } body.ulis-active .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.ulis-active .lg\:col-span-8 { grid-column: span 8 / span 8 !important; } body.ulis-active .lg\:col-span-4 { grid-column: span 4 / span 4 !important; } body.ulis-active .lg\:col-span-3 { grid-column: span 3 / span 3 !important; } body.ulis-active .lg\:col-span-2 { grid-column: span 2 / span 2 !important; } body.ulis-active .lg\:px-8 { padding-left: 32px !important; padding-right: 32px !important; } body.ulis-active .lg\:pb-20 { padding-bottom: 80px !important; } body.ulis-active .lg\:pt-14 { padding-top: 56px !important; } body.ulis-active .lg\:text-5xl { font-size: 48px !important; line-height: 1 !important; } } /* --- Responsive hide --- */ @media (max-width: 1279px) { body.ulis-active .max-xl\:hidden { display: none !important; } } @media (max-width: 1023px) { body.ulis-active .max-lg\:hidden { display: none !important; } } @media (max-width: 639px) { body.ulis-active .max-sm\:hidden { display: none !important; } } /* --- Hover --- */ body.ulis-active .hover\:text-academic-royal:hover { color: #2563eb !important; } body.ulis-active .hover\:text-academic-blue:hover { color: #1e3a8a !important; } body.ulis-active .hover\:text-white:hover { color: #fff !important; } body.ulis-active .hover\:text-slate-300:hover { color: #cbd5e1 !important; } body.ulis-active .hover\:text-slate-700:hover { color: #334155 !important; } body.ulis-active .hover\:bg-slate-50:hover { background-color: #f8fafc !important; } body.ulis-active .hover\:bg-academic-blue:hover { background-color: #1e3a8a !important; } body.ulis-active .hover\:bg-academic-royal:hover { background-color: #2563eb !important; } body.ulis-active .hover\:bg-slate-200\/60:hover { background-color: rgba(226,232,240,0.6) !important; } body.ulis-active .hover\:bg-white\/60:hover { background-color: rgba(255,255,255,0.6) !important; } body.ulis-active .hover\:border-academic-royal:hover { border-color: #2563eb !important; } body.ulis-active .hover\:underline:hover { text-decoration: underline !important; } body.ulis-active .hover\:brightness-110:hover { filter: brightness(1.1) !important; } body.ulis-active .hover\:-translate-y-1:hover { transform: translateY(-4px) !important; } body.ulis-active .hover\:shadow-glow-blue:hover { box-shadow: 0 0 25px -4px rgba(37,99,235,0.5) !important; } /* --- Line clamp --- */ body.ulis-active .line-clamp-2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body.ulis-active .line-clamp-3 { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* --- Aspect ratio --- */ body.ulis-active .aspect-\[16\/9\] { aspect-ratio: 16 / 9 !important; } /* --- Shadow --- */ body.ulis-active .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; } body.ulis-active .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) !important; } body.ulis-active .shadow-card-glass { box-shadow: 0 10px 30px -10px rgba(14,30,70,0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important; } body.ulis-active .shadow-glow-blue { box-shadow: 0 0 25px -4px rgba(37,99,235,0.5) !important; } /* --- Group hover --- */ body.ulis-active .group:hover .group-hover\:scale-105 { transform: scale(1.05) !important; } body.ulis-active .group:hover .group-hover\:text-academic-royal { color: #2563eb !important; } body.ulis-active .group:hover .group-hover\:text-academic-blue { color: #1e3a8a !important; } body.ulis-active .group:hover .group-hover\:translate-x-1 { transform: translateX(4px) !important; } body.ulis-active .group:hover .group-hover\:translate-x-0\.5 { transform: translateX(2px) !important; } /* --- Active --- */ body.ulis-active .active\:scale-95:active { transform: scale(0.95) !important; } /* --- Focus --- */ body.ulis-active .focus\:outline-none:focus { outline: none !important; } body.ulis-active .focus\:border-academic-royal:focus { border-color: #2563eb !important; } body.ulis-active .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(37,99,235,0.3) !important; } /* -------------------------------------------------------------------------- PHẦN 2: BODY OVERRIDES KHI KHÁCH XEM LANDING -------------------------------------------------------------------------- */ body.ulis-active { background: #f8faff !important; } body.ulis-active .header-container { display: none !important; } body.ulis-active .ad-placement-header-footer { display: none !important; } body.ulis-active footer, body.ulis-active .second-footer { display: none !important; } body.ulis-active .extra { display: none !important; } /* Chỉ áp full-width cho landing của KHÁCH (container.phtml gắn class ulis-container). Trước đây áp cho mọi trang có ulis-active => trang home sau đăng nhập bị dính sát mép trái, mất bố cục. */ body.ulis-active .content-container.ulis-container, body.ulis-active .content-container.ulis-container #contnet, body.ulis-active .content-container.ulis-container #contnet.effect-load { max-width: 100vw !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden; } body.ulis-active .content-container.ulis-container > .row, body.ulis-active .content-container.ulis-container > div { max-width: 100% !important; } /* Glass nav */ body.ulis-active .glass-frosted-nav { background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* -------------------------------------------------------------------------- PHẦN 3: CUSTOM COMPONENTS -------------------------------------------------------------------------- */ /* ---------- HERO ---------- */ .ulis-hero { position: relative; padding: 48px 0 40px; border-bottom: 1px solid #e2e8f0; background: radial-gradient(ellipse at 50% -10%, rgba(37,99,235,0.15) 0%, transparent 60%), radial-gradient(ellipse at 15% 40%, rgba(30,58,138,0.06) 0%, transparent 50%), #f8faff; overflow: hidden; } .ulis-hero .hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .ulis-hero .hero-inner { padding: 0 24px; } } @media (min-width: 1024px) { .ulis-hero .hero-inner { padding: 0 32px; } } .ulis-hero h1 { font-size: 32px; line-height: 1.2; font-weight: 900; color: #060d1f; letter-spacing: -0.02em; margin: 0 0 12px; text-align: center; } @media (min-width: 640px) { .ulis-hero h1 { font-size: 40px; } } @media (min-width: 1024px) { .ulis-hero h1 { font-size: 48px; } } .ulis-hero h1 .hero-gradient-1 { background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ulis-hero h1 .hero-gradient-2 { background: linear-gradient(90deg, #1d4ed8 0%, #4f46e5 50%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ulis-hero .hero-slogan { font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; color: #2563eb; font-weight: 600; text-align: center; margin: 0 0 12px; } @media (min-width: 640px) { .ulis-hero .hero-slogan { font-size: 22px; } } .ulis-hero .hero-desc { font-size: 14px; color: #475569; line-height: 1.7; max-width: 640px; margin: 0 auto 4px; text-align: center; } @media (min-width: 640px) { .ulis-hero .hero-desc { font-size: 15px; } } .ulis-hero .hero-search-wrap { max-width: 720px; margin: 28px auto 0; } .ulis-hero .hero-search-box { background: rgba(255,255,255,0.95); border: 1px solid #bfdbfe; border-radius: 999px; padding: 12px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 30px -10px rgba(14,30,70,0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .ulis-hero .hero-search-box input { flex: 1; border: 0; background: transparent; padding: 8px 6px; font-size: 14px; color: #0f172a; outline: none; font-family: inherit; } .ulis-hero .hero-search-box input::placeholder { color: #94a3b8; } .ulis-hero .hero-search-box .hero-btn-search { padding: 10px 22px; font-size: 13px; font-weight: 700; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%); color: #fff; box-shadow: 0 0 25px -4px rgba(37,99,235,0.5); white-space: nowrap; font-family: inherit; } .ulis-hero .hero-topics { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12px; color: #64748b; } .ulis-hero .hero-topics .topic-pill { padding: 4px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; font-weight: 500; color: #475569; text-decoration: none; transition: all 0.2s; } .ulis-hero .hero-topics .topic-pill:hover { background: #eff6ff; color: #2563eb; } /* ---------- STATS GRID ---------- */ .ulis-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; max-width: 900px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .ulis-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } .ulis-stat-card { background: rgba(255,255,255,0.95); padding: 10px 14px; border-radius: 12px; border: 1px solid #dbeafe; box-shadow: 0 10px 30px -10px rgba(14,30,70,0.08); display: flex; align-items: center; gap: 10px; min-width: 0; } .ulis-stat-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ulis-stat-icon .material-symbols-outlined { font-size: 18px; } .ulis-stat-text { min-width: 0; overflow: hidden; } .ulis-stat-number { font-size: 17px; font-weight: 800; color: #060d1f; line-height: 1.1; } @media (min-width: 640px) { .ulis-stat-number { font-size: 18px; } } .ulis-stat-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- HERO SEARCH - MOBILE ---------- */ @media (max-width: 640px) { /* Ẩn "Chủ đề tìm nhiều" + các pill */ .ulis-hero .hero-topics { display: none; } .ulis-hero .hero-search-wrap { margin-top: 20px; } /* Box: bỏ flex ngang, icon search đặt tuyệt đối đè lên input */ .ulis-hero .hero-search-box { position: relative; display: block; border-radius: 18px; padding: 10px; } .ulis-hero .hero-search-box > .material-symbols-outlined { position: absolute; top: 22px; left: 24px; pointer-events: none; z-index: 1; } /* Form xếp dọc: input trên, nút dưới (!important để ghi đè style inline trong phtml) */ .ulis-hero .hero-search-box form { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; } .ulis-hero .hero-search-box input { width: 100%; box-sizing: border-box; padding: 12px 12px 12px 40px; font-size: 16px; /* >=16px để iOS Safari không tự zoom khi focus */ background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; text-overflow: ellipsis; } .ulis-hero .hero-search-box input:focus { border-color: #2563eb; background: #fff; } .ulis-hero .hero-search-box .hero-btn-search { width: 100%; padding: 12px 16px; font-size: 14px; border-radius: 12px; } } /* ---------- MEDIA 16:9 ---------- */ .ulis-media-16-9 { aspect-ratio: 16 / 9; width: 100%; } @supports not (aspect-ratio: 16 / 9) { .ulis-media-16-9 { position: relative; padding-bottom: 56.25%; height: 0; } .ulis-media-16-9 > img { position: absolute; inset: 0; } } /* ---------- NÚT XEM THÊM SỰ KIỆN ---------- */ .ulis-view-more-wrap { margin-top: 40px; display: flex; align-items: center; justify-content: center; width: 100%; } a.ulis-view-more-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 14px 32px !important; border-radius: 999px !important; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%) !important; background-size: 200% 200% !important; background-position: 0% 50% !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-decoration: none !important; text-transform: none !important; border: none !important; outline: none !important; opacity: 1 !important; visibility: visible !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: 0 10px 25px -8px rgba(37, 99, 235, 0.55), 0 4px 10px -4px rgba(30, 58, 138, 0.35), 0 0 0 1px rgba(37, 99, 235, 0.15) !important; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.6s ease !important; cursor: pointer !important; } a.ulis-view-more-btn:hover { transform: translateY(-3px) !important; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #1e3a8a 100%) !important; background-position: 100% 50% !important; box-shadow: 0 18px 35px -8px rgba(37, 99, 235, 0.65), 0 8px 16px -6px rgba(30, 58, 138, 0.4), 0 0 0 1px rgba(37, 99, 235, 0.25) !important; color: #ffffff !important; } a.ulis-view-more-btn:active { transform: translateY(-1px) !important; } a.ulis-view-more-btn .ulis-vm-label { color: #ffffff !important; position: relative; z-index: 2; display: inline-block; } a.ulis-view-more-btn .ulis-vm-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.25) !important; transition: transform 0.35s ease, background 0.3s ease !important; flex-shrink: 0; position: relative; z-index: 2; } a.ulis-view-more-btn .ulis-vm-icon .material-symbols-outlined { font-size: 17px !important; line-height: 1 !important; color: #ffffff !important; display: inline-block; } a.ulis-view-more-btn:hover .ulis-vm-icon { transform: translateX(4px) !important; background: rgba(255, 255, 255, 0.4) !important; } @media (max-width: 640px) { .ulis-view-more-wrap { margin-top: 32px; } a.ulis-view-more-btn { padding: 13px 26px !important; font-size: 13px !important; gap: 10px !important; } a.ulis-view-more-btn .ulis-vm-icon { width: 24px !important; height: 24px !important; } a.ulis-view-more-btn .ulis-vm-icon .material-symbols-outlined { font-size: 16px !important; } } /* ---------- TIN TỨC ---------- */ .ulis-news-section { padding: 32px 0; background: #ffffff; border-bottom: 1px solid rgba(226, 232, 240, 0.7); } .ulis-news-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .ulis-news-inner { padding: 0 24px; } } @media (min-width: 1024px) { .ulis-news-inner { padding: 0 32px; } } .ulis-news-header { display: flex; flex-direction: column; margin-bottom: 32px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; } @media (min-width: 768px) { .ulis-news-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .ulis-news-header .ulis-news-link { margin-top: 16px; } @media (min-width: 768px) { .ulis-news-header .ulis-news-link { margin-top: 0; } } .ulis-news-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1024px) { .ulis-news-grid { grid-template-columns: 2fr 1fr; gap: 28px; } } .ulis-news-side { display: flex; flex-direction: column; gap: 28px; } .ulis-news-side > article { flex: 1; } .ulis-news-card { display: flex; flex-direction: column; height: 100%; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 16px; overflow: hidden; transition: all 0.35s ease; box-shadow: 0 10px 30px -10px rgba(14, 30, 70, 0.06); } .ulis-news-card:hover { box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.18); } .ulis-news-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .ulis-news-thumb { position: relative; overflow: hidden; background: #0f172a; aspect-ratio: 16 / 9; width: 100%; } .ulis-news-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; } .ulis-news-card:hover .ulis-news-thumb img { transform: scale(1.05); } .ulis-news-cat { position: absolute; top: 12px; left: 12px; background: rgba(15, 23, 42, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #ffffff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; } .ulis-news-cat--lg { top: 16px; left: 16px; font-size: 11px; padding: 6px 12px; } .ulis-news-body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .ulis-news-body--lg { padding: 28px; } .ulis-news-date { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 12px; font-weight: 600; margin: 0; } .ulis-news-date .material-symbols-outlined { font-size: 15px; color: #2563eb; } .ulis-news-date--lg .material-symbols-outlined { font-size: 16px; } .ulis-news-title { margin: 8px 0 0; color: #060d1f; font-size: 16px; font-weight: 700; line-height: 1.35; transition: color 0.25s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ulis-news-card:hover .ulis-news-title { color: #2563eb; } .ulis-news-title--lg { margin: 12px 0 0; font-size: 22px; line-height: 1.3; font-weight: 800; } @media (min-width: 640px) { .ulis-news-title--lg { font-size: 26px; } } .ulis-news-desc { margin: 8px 0 0; color: #475569; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ulis-news-desc--lg { margin: 12px 0 0; font-size: 14px; line-height: 1.65; -webkit-line-clamp: 3; } .ulis-news-empty { text-align: center; padding: 56px 20px; background: #f8fafc; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.8); } .ulis-news-empty .material-symbols-outlined { font-size: 56px; color: #cbd5e1; } .ulis-news-empty p { margin: 12px 0 0; color: #64748b; font-size: 14px; } .ulis-news-empty a { display: inline-block; margin-top: 12px; color: #2563eb; font-size: 12px; font-weight: 700; text-decoration: none; } .ulis-news-empty a:hover { text-decoration: underline; } /* ---------- COMMUNITY GRID (2 cột trái phải) ---------- */ .ulis-community-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 32px !important; } @media (min-width: 1024px) { .ulis-community-grid { grid-template-columns: 2fr 1fr !important; } } /* Xóa bỏ viền dưới của khối Hero để liền mạch với khối Tìm kiếm */ .ulis-hero { border-bottom: none !important; } /* Đảm bảo khối Tìm kiếm (Đăng bài) có màu nền đồng nhất với Hero */ .ulis-landing section.bg-transparent { background-color: #f8faff !important; } /* ======================================================== FIX TRIỆT ĐỂ VẠCH KẺ THỪA GIỮA CÁC KHỐI ======================================================== */ .ulis-landing section, .ulis-landing section.ulis-news-section, .ulis-landing section.py-12, .ulis-landing section.pt-8 { border: none !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; margin-bottom: 0 !important; } /* Xóa dứt điểm border của khối tin tức và hero cũ */ .ulis-hero, .ulis-news-section { border-bottom: none !important; } /* ========================================================================== HỆ THỐNG KHOẢNG CÁCH GIỮA CÁC KHỐI (SPACING) Trước đây dùng các class Tailwind không tồn tại trong file build (pt-12, pt-20, pb-10, py-12) và margin-top:60px inline => khoảng cách lúc 0, lúc quá lớn (~112px giữa Sự kiện và Tin tức). Giờ mỗi khối dùng 32px trên/dưới => khoảng cách giữa 2 khối = 64px. ========================================================================== */ .ulis-landing .ulis-sec { padding: 32px 0; } .ulis-landing .ulis-sec--composer { padding: 32px 0 0; } /* sát với khối Sự kiện bên dưới */ .ulis-landing .ulis-sec--events { padding: 32px 0; } /* cách khối Đăng bài 32px */ .ulis-landing .ulis-sec--community { padding: 32px 0 48px; } @media (max-width: 640px) { .ulis-hero { padding-bottom: 28px; } .ulis-landing .ulis-sec, .ulis-landing .ulis-sec--events, .ulis-news-section { padding-top: 24px; padding-bottom: 24px; } .ulis-landing .ulis-sec--composer { padding: 24px 0 0; } .ulis-landing .ulis-sec--community { padding-bottom: 32px; } } /* ========================================================================== BỐ CỤC 3 CỘT DƯỚI HERO -------------------------------------------------------------------------- HERO nằm trong .ulis-landing (full-width). Bên dưới là .ulis-home-loggedin > .row với 3 cột: .ulis-home-left sidebar/left-sidebar — WoWonder thuần, NGOÀI .ulis-landing .ulis-home-middle landing + feed — bọc trong .ulis-landing .ulis-home-right hồ sơ + gợi ý — hồ sơ thuần, gợi ý bọc .ulis-landing ========================================================================== */ .page-margin.ulis-home-loggedin { width: 100% !important; max-width: 1660px !important; /* <<< chinh so nay neu con ho / du ben phai */ margin: 0 auto !important; padding: 0 16px 32px !important; float: none !important; box-sizing: border-box; } .ulis-home-loggedin > .row { display: grid !important; grid-template-columns: 280px minmax(0, 1fr) 340px !important; grid-template-areas: "left middle right" !important; grid-auto-columns: 0 !important; grid-template-rows: auto !important; /* BAT BUOC: neu de grid-auto-rows:0 thi hang tu grid-template-areas bi cao 0 */ gap: 20px !important; align-items: start; width: auto !important; margin: 0 !important; } .ulis-home-loggedin > .row > .ulis-home-left { grid-area: left !important; } .ulis-home-loggedin > .row > .ulis-home-middle { grid-area: middle !important; } .ulis-home-loggedin > .row > .ulis-home-right { grid-area: right !important; } .ulis-home-loggedin > .row > *:not(.ulis-home-left):not(.ulis-home-middle):not(.ulis-home-right) { display: none !important; } .ulis-home-loggedin > .row::before, .ulis-home-loggedin > .row::after { content: none !important; display: none !important; } .ulis-home-loggedin > .row > .ulis-home-left, .ulis-home-loggedin > .row > .ulis-home-middle, .ulis-home-loggedin > .row > .ulis-home-right { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; min-width: 0; box-sizing: border-box; } /* -------------------------------------------------------------------------- CỘT TRÁI — giữ nguyên kiểu WoWonder gốc -------------------------------------------------------------------------- */ .ulis-home-left .left-sidebar, .ulis-home-left .dropdown-menu1, .ulis-home-left .post_prnt { width: 100% !important; max-width: 100% !important; } .ulis-home-left .left-sidebar { margin-top: 0 !important; padding-top: 0 !important; } /* Chặn plugin theiaStickySidebar chèn margin-top inline */ .ulis-home-left .theiaStickySidebar { position: static !important; width: auto !important; min-height: 0 !important; transform: none !important; margin-top: 0 !important; padding-top: 0 !important; } .ulis-home-left .theiaStickySidebar::before, .ulis-home-left .theiaStickySidebar::after { content: none !important; display: none !important; } /* -------------------------------------------------------------------------- CỘT PHẢI -------------------------------------------------------------------------- */ .ulis-home-right .sidebar-conatnier, .ulis-home-right .wow_content, .ulis-home-right .col-md-3, .ulis-home-right .sidebar, .ulis-home-right .rightcol { width: 100% !important; max-width: 100% !important; float: none !important; position: static !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } .ulis-home-right .row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; } /* Khoảng cách giữa thẻ hồ sơ và các khối gợi ý */ .ulis-home-right > .sidebar-conatnier { margin-bottom: 16px; } .ulis-home-right .ulis-side-blocks > * { margin-bottom: 16px; } .ulis-home-right .ulis-side-blocks > *:last-child { margin-bottom: 0; } /* Ẩn thẻ vốn không được hiển thị (tránh in code JS ra màn hình) */ .ulis-home-left script, .ulis-home-left style, .ulis-home-left link, .ulis-home-left template, .ulis-home-left noscript, .ulis-home-left input[type="hidden"], .ulis-home-right script, .ulis-home-right style, .ulis-home-right link, .ulis-home-right template, .ulis-home-right noscript, .ulis-home-right input[type="hidden"], .ulis-home-middle template { display: none !important; } .ulis-home-left, .ulis-home-right { min-width: 0; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; position: sticky; top: 70px; max-height: calc(100vh - 80px); overflow-y: auto; } .ulis-home-left::-webkit-scrollbar, .ulis-home-right::-webkit-scrollbar { width: 4px; } .ulis-home-left::-webkit-scrollbar-thumb, .ulis-home-right::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; } /* -------------------------------------------------------------------------- CỘT GIỮA — ép breakpoint Tailwind cho vừa bề rộng cột -------------------------------------------------------------------------- */ .ulis-home-middle { min-width: 0; } .ulis-home-middle [class*="max-w-"] { max-width: 100% !important; } body.ulis-active .ulis-home-middle .lg\:grid-cols-12 { grid-template-columns: minmax(0, 1fr) !important; } body.ulis-active .ulis-home-middle .lg\:col-span-8 { grid-column: auto !important; } body.ulis-active .ulis-home-middle .md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* --- Lề trong của cột giữa: tránh nội dung dính sát mép --- */ body.ulis-active .ulis-home-middle .lg\:px-8, body.ulis-active .ulis-home-middle .sm\:px-6, body.ulis-active .ulis-home-middle .px-4, .ulis-home-middle .ulis-news-inner { padding-left: 16px !important; padding-right: 16px !important; } /* --- Khoảng cách dọc đều nhau giữa các khối --- */ .ulis-home-middle .ulis-sec { padding: 24px 0 !important; } .ulis-home-middle .ulis-sec--composer { padding: 0 0 4px !important; } /* khối đầu: không đệm trên */ .ulis-home-middle .ulis-news-section { padding: 24px 0 !important; } .ulis-home-middle .ulis-sec--community { padding: 24px 0 32px !important; } /* --- Tiêu đề khối: thu gọn cho vừa bề ngang cột --- */ .ulis-home-middle .ulis-sec h2, .ulis-home-middle .ulis-news-header h2 { font-size: 22px !important; line-height: 1.3 !important; } .ulis-home-middle .ulis-sec .mb-8, .ulis-home-middle .ulis-news-header { margin-bottom: 20px !important; } /* --- Thẻ tin tức / sự kiện --- */ .ulis-home-middle .ulis-news-body { padding: 16px; } .ulis-home-middle .ulis-news-title { font-size: 15px; } .ulis-home-middle .ulis-news-desc { font-size: 12.5px; } .ulis-home-middle .gap-7 { gap: 20px !important; } .ulis-home-middle .ulis-view-more-wrap { margin-top: 24px; } /* --- Feed bài viết --- */ .ulis-home-middle #posts > * { margin-bottom: 16px; } .ulis-home-middle #posts > *:last-child{ margin-bottom: 0; } /* -------------------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1399px) { .ulis-home-loggedin > .row { grid-template-columns: 240px minmax(0, 1fr) 310px !important; gap: 14px !important; } } @media (max-width: 1100px) { .ulis-home-loggedin > .row { grid-template-columns: minmax(0, 1fr) 300px !important; grid-template-areas: "middle right" !important; } .ulis-home-left { display: none !important; } } @media (max-width: 860px) { .ulis-home-loggedin > .row { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "middle" !important; } .ulis-home-left, .ulis-home-right { display: none !important; } .page-margin.ulis-home-loggedin { padding: 0 10px 24px !important; } } /* ========================================================================== LƯỚI AN TOÀN: hero không bị ép cao 100vh -------------------------------------------------------------------------- Class min-h-screen đã được gỡ khỏi wrapper hero trong home/content.phtml. Rule này chỉ để chắc chắn, phòng khi file phtml bị khôi phục nhầm. ========================================================================== */ .ulis-landing > .flex.flex-col { min-height: 0 !important; } /* ========================================================================== TRẢ LẠI KHỐI TRÒ CHUYỆN -------------------------------------------------------------------------- PHẦN 2 ở trên có "body.ulis-active .extra { display:none }". Rule đó viết cho landing của KHÁCH, nhưng class ulis-active có mặt ở mọi trang không phải welcome — nên khi đăng nhập nó ẩn luôn .extra, tức khối chat mà container.phtml nạp qua chat/content. Với khách thì .extra vốn rỗng (container.phtml chỉ nạp chat khi đã đăng nhập), nên bỏ ẩn ở đây không ảnh hưởng giao diện khách. ========================================================================== */ body.ulis-active .extra { display: block !important; } /* ========================================================================== KHOẢNG TRỐNG ĐẦU SIDEBAR TRÁI -------------------------------------------------------------------------- container.phtml chạy $('div.leftcol').theiaStickySidebar({additionalMarginTop:65}). Cột trái mang class "leftcol" nên bị plugin bọc lại và chèn padding-top:65px inline -> khoảng trống ~65-90px phía trên menu. Cách sạch nhất là loại nó khỏi plugin trong container.phtml; khối dưới đây là lớp phòng vệ, phòng khi file đó chưa kịp sửa. ========================================================================== */ .ulis-home-left .theiaStickySidebar, .ulis-home-left > div[style*="padding-top"] { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; position: static !important; transform: none !important; min-height: 0 !important; top: auto !important; } .ulis-home-left .resize-sensor, .ulis-home-left .resizeSensor { display: none !important; } /* Phần tử hiển thị đầu tiên trong cột trái không được đẩy xuống */ .ulis-home-left .left-sidebar { margin: 0 !important; padding: 0 !important; } .ulis-home-left .left-sidebar > *:first-child, .ulis-home-left .left-sidebar > ul:first-of-type { margin-top: 0 !important; } /* ========================================================================== SIDEBAR: CỐ ĐỊNH KHI CUỘN, BỎ CUỘN NỘI BỘ -------------------------------------------------------------------------- position:sticky bị vô hiệu nếu một thẻ cha có overflow khác visible. PHẦN 2 ở trên đặt overflow-x:hidden cho .content-container.ulis-container -> đó là lý do hai sidebar vẫn trôi theo trang. Đổi sang overflow:clip kèm overflow-clip-margin để vừa chặn tràn ngang vừa giữ sticky hoạt động. ========================================================================== */ body.ulis-active .content-container.ulis-container, body.ulis-active .content-container.ulis-container #contnet { overflow-x: visible !important; } /* Cả hai cột: ghim cố định dưới header, cuộn được bên trong để xem hết. - top 76px : chừa chỗ cho header cố định - max-height: cao đúng phần màn hình còn lại - overflow-y: auto -> chỉ hiện thanh cuộn khi nội dung dài hơn màn hình, cột trái ngắn nên sẽ không có thanh cuộn nào. */ .ulis-home-loggedin > .row > .ulis-home-left, .ulis-home-loggedin > .row > .ulis-home-right { position: -webkit-sticky !important; position: sticky !important; top: 76px !important; bottom: auto !important; align-self: start !important; max-height: calc(100vh - 92px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; /* cuộn hết sidebar thì KHÔNG kéo theo cả trang */ scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; padding-right: 2px !important; } /* Thanh cuộn mảnh, chỉ rõ khi rê chuột vào */ .ulis-home-left::-webkit-scrollbar, .ulis-home-right::-webkit-scrollbar { width: 6px; } .ulis-home-left::-webkit-scrollbar-track, .ulis-home-right::-webkit-scrollbar-track { background: transparent; } .ulis-home-left::-webkit-scrollbar-thumb, .ulis-home-right::-webkit-scrollbar-thumb { background: transparent; border-radius: 9999px; } .ulis-home-left:hover::-webkit-scrollbar-thumb, .ulis-home-right:hover::-webkit-scrollbar-thumb { background: #cbd5e1; } .ulis-home-left:hover::-webkit-scrollbar-thumb:hover, .ulis-home-right:hover::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ========================================================================== SIDEBAR TRÁI: gộp thành một thẻ trắng, bỏ thụt lề và nền xám nửa vời -------------------------------------------------------------------------- left-sidebar.phtml có 2 thẻ