:root{--primary-color:#1565C0;--primary-gradient:linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);--primary-light:#42A5F5;--header-bg-light:#e3f2fd;--main-bg-color:#F0F2F5;--surface-color:#ffffff;--accent-color:#2E7D32;--accent-gradient:linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);--danger-color:#c62828;--danger-gradient:linear-gradient(135deg, #c62828 0%, #ef5350 100%);--text-color:#1A202C;--text-light:#718096;--border-color:#E2E8F0;--white-color:#ffffff;--shadow-sm:0 2px 4px rgba(148, 163, 184, 0.1);--shadow-md:0 8px 16px rgba(148, 163, 184, 0.15);--login-button-bg:#2962FF}*{box-sizing:border-box}body{font-family:'Roboto','Segoe UI',sans-serif;font-weight:500;margin:0;background-color:var(--main-bg-color);color:var(--text-color);display:flex;flex-direction:column;min-height:100vh;-webkit-text-size-adjust:100%;line-height:1.4;font-size:12.5px}#login-screen{display:flex;align-items:center;justify-content:center;flex-grow:1;background:url(https://firebasestorage.googleapis.com/v0/b/giamsattauthan.firebasestorage.app/o/assets%2Floginbackground.png?alt=media&token=7bfec3b1-2942-4596-a5d0-8f0274c06663) no-repeat center center;background-size:cover;padding:15px}.login-container{background:rgb(255 255 255 / .15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgb(255 255 255 / .4);border-radius:20px;padding:40px 40px;box-shadow:0 20px 50px rgb(0 0 0 / .1);width:100%;max-width:390px;text-align:center;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}.login-container h2{font-size:1.4rem;font-weight:600;margin:0 0 10px 0;text-shadow:0 2px 4px rgb(0 0 0 / .2);line-height:1.3;white-space:nowrap}.login-container .subtitle{color:#FFD740;margin-bottom:30px;font-size:.95rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.login-container input{width:100%;padding:14px 18px;margin-bottom:18px;border:1px solid rgb(255 255 255 / .5);border-radius:12px;background-color:rgb(255 255 255 / .9);transition:all 0.3s;font-size:1rem}.login-container input:focus{outline:none;background-color:#fff;box-shadow:0 0 0 4px rgb(66 165 245 / .4)}#login-form button{width:100%;padding:15px;background:linear-gradient(135deg,#2979FF 0%,#1565C0 100%);color:var(--white-color);border-radius:12px;font-weight:700;font-size:1rem;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 15px rgb(21 101 192 / .3);transition:transform 0.2s}#login-form button:hover{transform:translateY(-2px)}#login-error{background:rgb(211 47 47 / .8);padding:10px;border-radius:8px;margin-top:15px;display:none}@media (max-width:480px){.login-container h2{white-space:normal;font-size:1.5rem}.login-container{padding:30px 20px}}#main-app{display:none;flex-direction:column;width:100%}.app-header-container{position:sticky;top:0;z-index:999;background-color:rgb(255 255 255 / .95);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);padding-top:10px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}.app-header{position:absolute;top:15px;right:25px;display:flex;flex-direction:column;align-items:flex-end}.app-header .user-info{margin-bottom:5px;background:#f1f5f9;padding:6px 15px;font-size:.8rem;border-radius:20px}.user-info span{font-weight:700;color:var(--primary-color)}.app-logo{position:absolute;top:10px;left:20px;height:90px;width:auto;border-radius:15px;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));background-color:#fff0}.header-title{text-align:center;padding:10px 140px;min-height:110px;display:flex;flex-direction:column;justify-content:center}.header-title h1{margin:0 0 5px 0;font-size:1.5rem;text-transform:uppercase;font-weight:800;background:linear-gradient(to right,#1565C0 10%,#08F7FE 30%,#1565C0 100%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#fff0;animation:shine 20s linear infinite}@keyframes shine{0%{background-position:200% center}0.40%{background-position:-200% center}100%{background-position:-200% center}}.header-title h2{font-size:1rem;font-weight:600;color:#F57C00;margin:0;animation:pulse-glow 3s ease-in-out infinite}@keyframes shine{to{background-position:-200% center}}@keyframes pulse-glow{0%,100%{opacity:1;text-shadow:0 0 5px rgb(245 124 0 / .2)}50%{opacity:.8;text-shadow:0 0 15px rgb(245 124 0 / .5)}}.tab-container{display:flex;justify-content:center;padding:0 25px;gap:8px;margin-top:5px}.tab-button{padding:10px 20px;cursor:pointer;border:none;border-radius:30px;background-color:#fff;font-size:.85rem;font-weight:600;color:#4d4e5e;transition:all 0.3s ease;box-shadow:var(--shadow-sm)}.tab-button:hover{color:var(--primary-color);transform:translateY(-2px)}.tab-button.active{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 10px rgb(33 150 243 / .4)}.tab-content{display:none;animation:fadeIn 0.3s ease}.tab-content.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}.status-column{height:100%;display:flex;flex-direction:column;min-height:350px}.status-column .card-body{flex-grow:1;padding:0;display:flex;flex-direction:column}.ship-count{background:rgb(255 255 255 / .25);padding:2px 8px;border-radius:10px;color:#fff;font-weight:700;border:1px solid rgb(255 255 255 / .3);font-size:.75rem}.notification-list{flex-grow:1;max-height:400px;overflow-y:auto;background:#fff;list-style:none;padding:0;margin:0}.notification-item{padding:10px 15px;border-bottom:1px solid #f1f1f1;font-size:.75rem;border-left:3px solid #fff0;transition:background 0.2s}.notification-item:hover{background-color:#f8fafc;border-left-color:var(--primary-color)}.notification-item span{font-weight:700;color:#000;font-size:.75rem}.card{background:var(--white-color);border-radius:16px;box-shadow:var(--shadow-md);margin-bottom:25px;overflow:hidden;border:none}.card-header{background:linear-gradient(to right,#ffffff,#f8fafc);padding:12px 20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.status-column .card-header{background:var(--primary-gradient)}.status-column .card-header h3{color:#fff;margin:0;font-size:1rem}.card-header h2,.card-header h3{margin:0;color:var(--primary-color);font-size:1rem;font-weight:700}.card-body{padding:20px}.stages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;width:100%}.stages-grid .card{margin-bottom:0;height:100%;box-shadow:var(--shadow-sm)}.stages-grid .card-header{padding:8px 12px}.stages-grid .card-header h3{font-size:.9rem}.stages-grid .card-body{padding:15px;overflow:hidden}.stages-grid .form-group{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:10px;width:100%}.stages-grid .form-group label{width:100%;font-size:.75rem;color:var(--text-light);margin:0}.stages-grid .form-group input,.stages-grid .form-group select{width:100%!important;max-width:100%!important;padding:6px 10px;font-size:.85rem;box-sizing:border-box;height:32px}.stages-grid button{width:100%;margin-right:0;margin-top:8px;padding:8px;font-size:.85rem}button{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;text-transform:uppercase;transition:all 0.2s;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center}button:hover{transform:translateY(-2px);filter:brightness(1.05)}button.primary{background:var(--primary-gradient);color:#fff}button.accent{background:var(--accent-gradient);color:#fff}button.danger{background:var(--danger-gradient);color:#fff}button.secondary{background-color:#e2e8f0;color:var(--text-color);box-shadow:none}#logout-button{background:var(--danger-gradient);padding:4px 10px;font-size:.7rem;border-radius:20px;color:#fff;margin-top:2px}.form-group{margin-bottom:15px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.form-group label{width:160px;font-weight:600;color:var(--text-color);font-size:.9rem}.form-group input,.form-group select,.form-group textarea{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:8px;background:#f9fafb;font-size:.9rem}.form-group input:focus{outline:none;border-color:var(--primary-light);background:#fff;box-shadow:0 0 0 3px rgb(66 165 245 / .15)}.table-container{width:100%;overflow-x:auto;border-radius:12px;box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--border-color)}table{width:100%;border-collapse:separate;border-spacing:0}th{padding:8px 4px;text-align:center!important;vertical-align:middle!important;border-bottom:1px solid var(--border-color);background:var(--header-bg-light);color:var(--primary-color);font-weight:700;font-size:.8rem;text-transform:uppercase;white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.3}td{padding:10px 10px;text-align:left;border-bottom:1px solid var(--border-color);font-size:.75rem}tr:hover td{background-color:#f0f7ff}tr:last-child td{border-bottom:none}td.actions-cell{text-align:center}td.actions-cell button{padding:4px 8px;font-size:.7rem}.pagination{margin-top:20px;display:flex;justify-content:center;align-items:center;width:100%;gap:10px}#domestic-stats-container,#imported-stats-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;width:100%}.stats-display{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:25px;border:1px solid var(--border-color);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);margin-top:0;height:100%}.stats-info{flex:1;padding-right:20px;min-width:200px}.stats-info p{margin:8px 0;font-size:.95rem;line-height:1.5}.stats-info strong{color:var(--primary-color)}.stats-chart{flex:0 0 300px;width:300px;height:300px;display:flex;align-items:center;justify-content:center}@media (max-width:1400px){#domestic-stats-container,#imported-stats-container{grid-template-columns:1fr}.stats-display{justify-content:center}}@media (max-width:600px){.stats-display{flex-direction:column;text-align:center}.stats-info{padding-right:0;padding-bottom:20px}}.modal{display:none;position:fixed;z-index:2000;top:0;left:0;width:100%;height:100%;background-color:rgb(15 23 42 / .6);backdrop-filter:blur(4px);justify-content:center;align-items:center}.modal.active{display:flex}.modal-content{background:#fff;padding:25px;width:90%;max-width:600px;border-radius:20px;box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);position:relative;max-height:90vh;overflow-y:auto;animation:slideDown 0.3s ease}@keyframes slideDown{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.close-button{position:absolute;top:15px;right:15px;width:30px;height:30px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.2s}.close-button:hover{background:#fee2e2;color:#ef4444}.search-bar{display:flex;gap:10px;margin-bottom:15px}.search-bar input{border-radius:30px;box-shadow:var(--shadow-sm);padding:8px 15px;font-size:.9rem}.search-bar button{border-radius:30px;padding:8px 20px}@media (max-width:1300px){.dashboard-grid,.stages-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){main{padding:15px}.dashboard-grid,.stages-grid{grid-template-columns:1fr}.status-column{min-height:auto}.header-title{padding:0 10px;margin-top:60px;min-height:auto}.header-title h1{font-size:1.2rem}.header-title h2{font-size:.9rem}.app-logo{height:60px!important;top:10px;left:10px}.app-header{top:10px;right:10px}.tab-container{justify-content:flex-start;overflow-x:auto;background:#fff;padding:5px 15px}.tab-button{white-space:nowrap;flex-shrink:0;padding:8px 16px}.login-container{width:85%;padding:30px 20px}.stats-display{flex-direction:column}.stats-chart{max-width:100%;margin-top:20px}}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(15 23 42 / .7);backdrop-filter:blur(5px);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700}.spinner{width:45px;height:45px;border:4px solid rgb(255 255 255 / .2);border-top-color:var(--accent-color);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}tr.group-odd{background-color:#ffffff!important}tr.group-even{background-color:#f8fafc!important}tr.group-summary{background-color:#e8f5e9!important;font-weight:700;border-top:2px solid #4CAF50}th,td{padding:10px 10px;text-align:left;border-bottom:1px solid rgb(0 0 0 / .12);border-right:1px solid rgb(0 0 0 / .1)}th:last-child,td:last-child{border-right:none;border-bottom:1px solid var(--border-color)}.btn-yellow,button.warning{background:linear-gradient(135deg,#FFA726 0%,#F57C00 100%)!important;color:#263238!important;font-weight:800!important;box-shadow:0 4px 6px rgb(245 124 0 / .3)!important;border:none;transition:all 0.2s}.btn-yellow:hover,button.warning:hover{background:linear-gradient(135deg,#FFB74D 0%,#EF6C00 100%)!important;transform:translateY(-2px);box-shadow:0 6px 12px rgb(245 124 0 / .4)!important}.history-item{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.history-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--primary-light)}.history-item h4{color:var(--primary-color);font-size:1rem;font-weight:800;margin-top:0;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f1f5f9}.history-item p{margin:6px 0;font-size:.9rem;color:var(--text-color);line-height:1.5}.history-item strong{font-weight:700;color:#374151;margin-right:5px}.history-item:hover{box-shadow:var(--shadow-md);border-color:var(--primary-light);transform:translateY(-2px);transition:all 0.3s ease}.stages-grid button:disabled{background:#607D8B!important;color:white!important;opacity:1!important;cursor:not-allowed;box-shadow:none!important;border:1px solid #455A64!important}.child-ship-title{background:linear-gradient(to right,#e3f2fd,#ffffff);padding:12px 20px;border-radius:8px;color:#0d47a1;font-weight:800;font-size:1.1rem;margin-bottom:20px;border-left:5px solid #1976d2;box-shadow:0 4px 6px rgb(0 0 0 / .05)}#lightship-table-body button:disabled{background:#78909C!important;color:white!important;font-size:10px!important;padding:3px 8px!important;box-shadow:none!important;border:1px solid #B0BEC5!important;opacity:1!important;cursor:default}.header-actions{display:flex;align-items:center;gap:12px;margin-top:4px}.hdsd-link{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--primary-color);font-size:.8rem;font-weight:700;background-color:#e3f2fd;padding:4px 10px;border-radius:15px;transition:all 0.2s ease;border:1px solid #fff0}.hdsd-link:hover{background-color:#bbdefb;transform:translateY(-1px);box-shadow:0 2px 4px rgb(0 0 0 / .1)}#logout-button{margin-top:0!important}.weather-widget{width:fit-content;margin-left:auto;margin-right:0;margin-top:6px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7eab6a 10%,#d2f1c4 20%);color:#2d6df7;box-shadow:0 4px 6px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .2);padding:6px 18px;border-radius:25px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;letter-spacing:.3px;opacity:0;transition:all 0.5s ease-in-out}.weather-widget.show{opacity:1;transform:translateY(0)}.weather-location{color:#0c29c9;font-weight:800;text-transform:uppercase;margin-right:10px;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.weather-separator{color:rgb(255 255 255);margin:0 8px;font-weight:300}.weather-icon-param{color:#B3E5FC;margin-right:4px}.notification-widget{float:left;width:45%;margin-top:5px;margin-left:1;display:flex;align-items:center;background:linear-gradient(135deg,#FF512F 0%,#DD2476 100%);color:#fff;box-shadow:0 4px 6px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .2);padding:6px 15px;border-radius:25px;font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;overflow:hidden;position:relative}.bell-icon{margin-right:10px;font-size:1.2em;color:#FFEB3B;animation:shake 2s infinite}.marquee-content{flex-grow:1;overflow:hidden;white-space:nowrap;position:relative;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}#marquee-text{display:inline-block;padding-left:100%;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;perspective:1000px;animation:marquee-scroll 25s linear infinite}@keyframes marquee-scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-100%,0,0)}}@keyframes shake{0%,100%{transform:rotate(0deg)}10%,30%,50%,70%,90%{transform:rotate(-10deg)}20%,40%,60%,80%{transform:rotate(10deg)}}.edit-noti-btn{flex-shrink:0!important;width:30px!important;height:30px!important;display:flex!important;align-items:center;justify-content:center;z-index:9999;position:relative;border-radius:50%;margin-left:10px;cursor:pointer;background:rgb(255 255 255 / .25)!important;border:1px solid rgb(255 255 255 / .5)!important;color:#ffffff!important;transition:all 0.3s ease}.edit-noti-btn:hover{background:#ffffff!important;color:#0288D1!important;transform:scale(1.1);box-shadow:0 2px 5px rgb(0 0 0 / .2)}.marquee-content{flex-grow:1;overflow:hidden;position:relative;margin-right:5px}.marquee-content{flex-grow:1;overflow:hidden;white-space:nowrap;position:relative;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);margin-right:5px}.info-bar-wrapper{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:0 10px;box-sizing:border-box}.notification-widget{float:none;margin:0;flex:1;max-width:70%;margin-right:20px;display:flex;align-items:center;background:linear-gradient(135deg,#29B6F6 0%,#81D4FA 100%);color:#fff;box-shadow:0 4px 6px rgb(0 0 0 / .1);border:1px solid rgb(255 255 255 / .4);padding:6px 18px;border-radius:25px;font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;overflow:hidden}.weather-widget{float:none;margin:0;width:auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7eab6a 10%,#d2f1c4 20%);color:#2d6df7;box-shadow:0 4px 6px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .2);padding:6px 16px;border-radius:25px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;opacity:0;transition:all 0.5s ease-in-out;opacity:0;filter:blur(10px);transform:translateY(5px);transition:all 0.8s cubic-bezier(.4,0,.2,1)}.weather-widget.show{opacity:1;filter:blur(0);transform:translateY(0)}}@media (max-width:768px){.info-bar-wrapper{flex-direction:row!important;align-items:stretch!important;gap:6px;padding:0 5px;margin-top:8px}.notification-widget{flex:1;width:auto!important;max-width:none!important;min-width:0;font-size:11px!important;padding:0 10px!important;height:34px!important;border-radius:17px!important}.notification-widget .bell-icon{display:none}.marquee-content{margin-right:2px}.edit-noti-btn{width:24px!important;height:24px!important;margin-left:5px!important}.weather-widget{width:auto!important;flex-shrink:0;font-size:10px!important;padding:0 8px!important;height:34px!important;margin:0!important;border-radius:17px!important}.weather-location{font-size:9px!important;margin-right:3px!important;max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}.weather-separator{margin:0 2px!important}.weather-widget i{font-size:.9em}}@media (max-width:380px){.weather-widget span:nth-child(7),.weather-widget span:nth-child(8),.weather-widget span:nth-child(5),.weather-widget span:nth-child(6){display:none!important}}.empty-port-icon svg{animation:boat-bob 3s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgb(0 0 0 / .1))}@keyframes boat-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}@media (max-width:768px){.header-bottom{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;padding:2px 5px!important;gap:5px!important}.notification-marquee{flex:0 0 45%!important;width:45%!important;max-width:40%!important;min-width:0!important;margin-right:0!important;background-color:#fff8e1;border:1px solid #ffe0b2;height:32px!important}.marquee-content{font-size:11px!important;line-height:30px!important;font-weight:600}.weather-widget{flex:0 0 55%!important;width:55%!important;max-width:55%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 2px!important;height:32px!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important}.weather-widget i{font-size:9px!important;margin-right:2px!important}.weather-widget span{margin:0 1px!important;display:inline-block!important}.weather-separator{display:none!important}.weather-location{max-width:45px!important;overflow:hidden!important;text-overflow:ellipsis!important}}#port-simulation-map{position:relative;display:flex;flex-direction:row;gap:20px;padding:20px;min-height:650px;align-items:stretch;border-radius:12px;overflow:hidden;border:1px solid rgb(255 255 255 / .3);z-index:1}#port-simulation-map::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:var(--sim-bg,url(background-cang.jpg));background-size:cover;background-position:center;opacity:1;z-index:-1;transition:background-image 1s ease-in-out}.simulation-clock{position:absolute;top:8px;right:12px;z-index:20;background:rgb(0 0 0 / .6);border:1px solid rgb(255 255 255 / .3);border-radius:8px;padding:5px 12px;color:#00e676;font-family:'Consolas','Monaco',monospace;font-weight:700;text-align:right;line-height:1.2;box-shadow:0 2px 5px rgb(0 0 0 / .5);backdrop-filter:blur(4px)}.clock-time{font-size:16px;letter-spacing:1px}.clock-date{font-size:11px;color:#ccc}.map-column{flex:1;min-width:300px;display:flex;flex-direction:column}.group-connected{background:rgb(255 255 255 / .1);border:2px dashed rgb(255 255 255 / .5);border-radius:15px;padding:20px 15px;position:relative;height:100%}#zone-cang2,.zone-waiting{background:rgb(255 255 255 / .1)!important;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px 0 rgb(31 38 135 / .37);border-radius:12px}.zone-waiting{flex-grow:1;padding:10px;height:fit-content!important;min-height:200px}.port-zone{display:flex;flex-direction:column;align-items:center;position:relative;width:100%}.group-label{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#0277bd;color:#fff;padding:4px 15px;font-size:12px;font-weight:700;border-radius:12px;box-shadow:0 2px 5px rgb(0 0 0 / .3);white-space:nowrap;border:2px solid rgb(255 255 255 / .8)}.port-label{font-weight:700;color:#fff;margin-bottom:10px;background:linear-gradient(135deg,#014f86,#0277bd);padding:6px 15px;border-radius:20px;box-shadow:0 4px 8px rgb(0 0 0 / .3);border:2px solid rgb(255 255 255 / .8);white-space:nowrap}.concrete-pier{height:50px;width:100%;background:linear-gradient(to bottom,#ecf0f1,#bdc3c7);border:1px solid #95a5a6;display:flex;align-items:center;justify-content:center;color:#2c3e50;font-weight:800;font-size:1.1rem;z-index:5;box-shadow:0 8px 15px rgb(0 0 0 / .4),inset 0 1px 0 rgb(255 255 255 / .8)}.berth-container{width:100%;display:flex;flex-direction:column;background-image:linear-gradient(-225deg,rgb(125 226 252 / .6) 0%,rgb(185 182 229 / .6) 100%)!important;backdrop-filter:blur(-1px);-webkit-backdrop-filter:blur(-1px);border:1px solid rgb(255 255 255 / .5);box-shadow:0 8px 32px 0 rgb(31 38 135 / .15);color:#1a237e;border-radius:12px;overflow:hidden}.berth-row{position:relative;height:130px;width:100%;display:flex;flex-direction:column}.split-berth{display:flex;width:100%;height:100%}.sub-slot{flex:1;border:1px dashed rgb(255 255 255 / .4);position:relative;background:rgb(255 255 255 / .05);display:flex;align-items:center;justify-content:center;padding:2px;overflow:hidden}.full-slot-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:6}.water-label-group{text-align:center;font-size:11px;color:#fff;font-weight:700;padding:3px;background:rgb(0 0 0 / .4);text-transform:uppercase}.sub-slot,.full-slot-overlay{position:relative!important;display:flex!important;justify-content:center;align-items:flex-end;overflow:visible!important;z-index:1}.sim-ship{background-color:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;border-radius:0!important;width:100%!important;height:100%!important;position:absolute;bottom:0;left:0;z-index:10;cursor:pointer;background-repeat:no-repeat;background-position:bottom center;background-size:contain;transition:transform 0.3s;animation:floatShip 4s ease-in-out infinite}.ship-style-full{background-image:url(https://firebasestorage.googleapis.com/v0/b/giamsattauthan.firebasestorage.app/o/assets%2Ffullship.png?alt=media&token=ed1b4b02-742d-4bcf-8f58-99bfc93507b7)!important;background-size:100% 130%!important;height:120%!important;bottom:10px;filter:drop-shadow(0 10px 5px rgb(0 0 0 / .5))}.ship-style-mini{background-image:url(https://firebasestorage.googleapis.com/v0/b/giamsattauthan.firebasestorage.app/o/assets%2Fminiship.png?alt=media&token=a8d6f3a5-ad96-4949-99f0-9977cbcc18d0)!important;background-size:contain!important;width:90%!important;left:6%!important;bottom:8px;filter:drop-shadow(0 5px 3px rgb(0 0 0 / .4))}.sim-ship:hover{transform:translateY(-8px) scale(1.05);z-index:100;filter:drop-shadow(0 0 10px rgb(255 255 255 / .6))}.sim-ship .ship-name-label{position:absolute;top:0;left:25px;transform:none;width:auto;white-space:nowrap;background:#e91e63;color:#fff;box-shadow:0 3px 6px rgb(0 0 0 / .3);text-shadow:0 1px 1px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .3);border-radius:12px;padding:2px 10px;font-size:11px;font-weight:700;z-index:20}.sim-ship .cargo-bar-bg{position:absolute;bottom:22%;left:45%;transform:translateX(-50%);width:70%;height:6px;background:rgb(0 0 0 / .7);border:1px solid rgb(255 255 255 / .4);border-radius:3px;margin:0;z-index:15}.sim-ship .cargo-bar-fill{background:linear-gradient(to top,rgb(57 255 20) 0%,rgb(204 255 0) 100%);box-shadow:0 0 10px rgb(57 255 20),0 0 25px rgb(57 255 20 / .8),0 0 40px rgb(57 255 20 / .4);height:100%;border-radius:2px;transition:all 0.3s ease}.sim-ship .ship-info-row{position:absolute;bottom:5px;width:100%;text-align:center;font-size:10px;font-weight:700;color:#fc2803;text-shadow:0 1px 2px #000;pointer-events:none}.waiting-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;align-content:flex-start}.mini-ship{background:linear-gradient(to top,#50cc7f 0%,#f5d100 100%);color:#000;padding:8px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 2px 5px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .3);transition:all 0.2s;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}.mini-ship:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgb(0 0 0 / .3);background:linear-gradient(135deg,#ffa726,#fb8c00)}.ship-name-label{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;text-align:left;padding-left:10px;line-height:1.2;display:block;width:100%}.ship-info-row{display:flex;justify-content:space-between;margin-top:2px;font-size:10px}.cargo-bar-bg{width:100%;height:9px;background:rgb(0 0 0 / .4);border-radius:3px;margin-top:4px;border:1px solid rgb(255 255 255 / .3)}.cargo-bar-fill{height:100%;background:#76ff03;width:0%;box-shadow:0 0 8px rgb(118 255 3 / .8)}@keyframes floatShip{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@media screen and (max-width:1024px){#port-simulation-map{flex-direction:column;padding:10px;min-height:auto}.map-column{width:100%;margin-bottom:20px}.group-connected,#zone-cang2{zoom:.65;-moz-transform:scale(.65);-moz-transform-origin:top left;width:100%}.zone-waiting{margin-left:0;zoom:.8}.sim-ship:hover{transform:none}}.concrete-pier{position:relative;overflow:hidden}.shiploader-gears{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;opacity:.5;transition:opacity 0.3s}.shiploader-gears i{color:#7f8c8d}.big-gear{font-size:24px}.small-gear{font-size:16px;margin-top:10px}.shiploader-active{opacity:1!important}.shiploader-active .big-gear{color:#e67e22;animation:spin 3s linear infinite}.shiploader-active .small-gear{color:#d35400;animation:spin-reverse 2s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin-reverse{100%{transform:rotate(-360deg)}}