:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#202660;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100vw;height:100vh;margin:0;padding:0;display:flex;justify-content:center;align-items:center;background-color:#ededed}.bigdiv{width:700px;height:60%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-radius:35px;padding:20px}.bigdiv:hover{box-shadow:0 8px 16px #0003;transition:transform 3s ease-in-out,box-shadow .3s;background-color:#e7eaed}.image-aichatbot img,.image-predict img,.image-computer-vision img{width:100px;height:auto;transition:transform .2s}.logoOcean{display:flex;justify-content:start;height:6em;padding:1em;will-change:filter;transition:filter .3s}.responsive-text{max-width:100%;margin:0 auto;padding:5px 5px 30px;font-size:1rem;line-height:1.5;text-align:justify}.left-align{display:flex;justify-content:flex-start;width:100%}.fade-enter{opacity:0;transform:scale(.9)}.fade-enter-active{opacity:1;transform:scale(1);transition:opacity .3s,transform .3s}.fade-exit{opacity:1;transform:scale(1)}.fade-exit-active{opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}.big-div-dad{margin-top:3%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:0;width:70%;height:75vh;background-color:#0ff;background-image:url(/assets/oficeback-DmhWRoh0.png);background-size:cover;background-position:center;gap:20px;border-radius:25px;box-shadow:0 0 20px #0000001a}.big-div-4div{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:25px;justify-content:center;align-items:center;width:80%}p{padding-left:15px;color:#333;text-align:start;margin-top:10px}.head-of-big-div{margin:0 0 3%;padding:5px 0;width:100%;height:50px;background-color:#fff;border-top-right-radius:24px;border-top-left-radius:24px;display:flex;align-items:center;box-shadow:0 2px 4px #0000001a}.khoi-dau-moi{display:flex;flex-direction:row;justify-content:center;align-items:center}.bigdiv1,.bigdiv2,.bigdiv3,.bigdiv4{background-color:#fff;width:80%;height:95%;border-radius:25px;padding:25px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 8px #0000001a;transition:transform .3s,box-shadow .3s}.bigdiv1:hover,.bigdiv2:hover,.bigdiv3:hover,.bigdiv4:hover{transform:translateY(-10px);box-shadow:0 8px 16px #0003}.image-aichatbot,.image-predict,.image-computer-vision{display:flex;flex-direction:column;justify-content:center;align-items:center}.image-aichatbot img,.image-predict img,.image-computer-vision img{width:80px;height:auto;transition:transform .2s}.image-aichatbot img:hover,.image-predict img:hover,.image-computer-vision img:hover{transform:scale(1.1)}.back-button-container{background-color:#7fffd4;margin-bottom:20px}.logocuaocean{max-height:50px;max-width:120px;height:auto;width:auto;margin-left:10px;flex-shrink:0}.slogan{flex:1;text-align:center;margin:0}.tongquan{display:flex;flex-direction:column;width:100%;max-width:100%;overflow-x:hidden}.component-container{display:flex;flex-direction:column;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0 0;width:auto;max-width:100%;box-sizing:border-box}.component-title{font-size:20px;font-weight:700;margin-bottom:10px;margin-top:0;color:#0c4f80}.component-title-overview{font-size:24px;font-weight:700;margin-bottom:20px;margin-top:0;color:#0c4f80;text-align:center;width:100%}.component-content{font-size:16px;color:#333;width:100%}.form-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;max-width:100%;box-sizing:border-box;padding:0 20px}.form-container .MuiTextField-root{flex:1;margin:0 10px;max-width:300px}.form-container .MuiTextField-root:first-child{margin-left:200px}.form-container .MuiTextField-root:last-child{margin-right:200px}.chart-container{display:flex;flex-direction:column;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0 0;width:auto;max-width:100%;box-sizing:border-box;align-items:stretch}.equipment-predicted-row{display:flex;flex-direction:row;gap:24px;margin-top:20px;margin-bottom:20px}.equipment-detail{flex:1;background:#fff;border-radius:12px;padding:24px 12px;display:flex;flex-direction:column;align-items:left;min-width:260px;max-width:320px;box-shadow:0 2px 8px #0000000a}.equipment-icon{margin-bottom:16px}.equipment-info{width:100%;margin-top:8px}.equipment-info-value{border-bottom:1px solid #e0e0e0;margin-bottom:8px;min-height:24px;font-weight:500;color:#1372b6}.predicted-actual-parameter{flex:2;background:#fff;border-radius:12px;padding:24px 12px;display:flex;flex-direction:column;gap:12px;min-width:400px;box-shadow:0 2px 8px #0000000a}.parameter-chart{background:#edeff2;border-radius:8px;padding:8px 8px 8 8px;margin-bottom:4px;box-shadow:0 1px 4px #00000008;color:#135025}.equipment-info-title{color:#135025}.filter-container{display:flex;flex-direction:column;align-items:right;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0;width:auto;max-width:100%;box-sizing:border-box}.component-title-machine{font-size:28px;font-weight:700;margin-bottom:10px;margin-top:0;color:#0c4f80;text-align:left;width:100%}.tongquan{display:flex;flex-direction:column}.component-container-water{display:flex;background-color:#f5f5f5;border-radius:8px;margin:20px 0 0;gap:20px;width:97%;justify-content:space-around}.component-title{font-size:24px;font-weight:700;margin-bottom:10px}.component-content{font-size:16px;color:#333}.chart-container{display:flex;flex-direction:row;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0 0;gap:0px;justify-content:space-around}.number-of-active{display:flex;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0 0;justify-content:space-around}.number-of-active1,.number-of-active2{display:flex;flex-direction:column;background-color:#edeff2;color:#333;border-radius:10px;justify-content:center;align-items:center;width:45%}.khung-chua-hai-chart{flex-direction:row;display:flex;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px 0 0;justify-content:space-around;gap:20px}.chart-trai,.chart-phai{width:45%;display:flex;flex-direction:column;padding-left:10px;padding-right:10px;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;margin-top:20px;gap:20px}.ai-predict-container{position:relative;display:flex;min-height:100vh;width:100vw;background-color:#f8fafc}.sidebar{width:240px;background:#0f1723;height:calc(100vh - 60px);position:absolute;top:60px;left:0;border-right:1px solid rgba(255,255,255,.87);box-shadow:4px 0 8px #00000005}.main-content{flex-grow:1;margin-top:60px;margin-left:240px;padding:15px;background-color:#f5f5f5;border-radius:10px;box-shadow:0 4px 8px #0000001a;height:calc(100vh - 98px);overflow-y:auto}.sidebar-header{padding-top:40px;padding-left:15px}.sidebar-title{color:#e5e7eb!important;font-size:12px!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase}.sidebar-divider{margin:16px 0 8px!important;background-color:#f3f4f6!important}.sidebar-nav{padding:0 8px!important}.sidebar-item{margin:4px 0!important;padding:10px 12px!important;border-radius:6px!important;transition:all .2s ease!important}.sidebar-item:hover{background-color:#f8fafc!important}.sidebar-item.selected{background-color:#f1f5f9!important}.sidebar-icon{min-width:32px!important;color:#e5e7eb!important}.sidebar-item.selected .sidebar-icon{color:#3b82f6!important}.sidebar-text span{font-size:14px!important;color:#e5e7eb!important;font-weight:500!important}.sidebar-item.selected .sidebar-text span{color:#1e40af!important}.sidebar-badge{min-width:18px;height:18px;padding:0 6px;border-radius:9px;background-color:#e2e8f0;color:#64748b;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-left:8px}.sidebar-item:after{display:none}.sidebar-item:hover .sidebar-icon,.sidebar-item:hover .sidebar-text span{color:#3b82f6!important}@media (max-width: 768px){.sidebar{width:200px}.main-content{margin-left:200px}}.header{display:flex;align-items:baseline;justify-content:center;padding:10px;background-color:#f8f9fa;width:100%;box-shadow:0 2px 4px #0000001a;position:fixed;top:0;left:0;right:0;z-index:1000;height:60px}.logoOceanheader{position:absolute;left:10px;top:50%;transform:translateY(-50%);height:80%;max-height:50px;padding:0;will-change:filter;transition:filter .3s}.home-icon{position:absolute;right:50px;top:50%;transform:translateY(-50%);height:40%;max-height:50px;padding:0;will-change:filter;transition:filter .3s}.chamthan-icon{position:absolute;right:100px;top:50%;transform:translateY(-50%);height:40%;max-height:50px;padding:0;will-change:filter;transition:filter .3s}.left-align-title{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:1.5rem;color:#333;margin-left:80px}.dx-blue{color:#1479bf;font-weight:700}.ai-green{color:#3bab49;font-weight:700}