/* Version 02: horizontal navigation and shipyard photography. Presentation only. */
html{background:#0a2238}body{background:linear-gradient(145deg,#0a2238,#164968);background-attachment:fixed}
#login{position:relative;isolation:isolate;min-height:100vh;padding:54px 7%;display:flex;justify-content:flex-end;overflow:hidden;background:#081e30}
.hp-login-photo{position:absolute;inset:0;z-index:-2;background-position:34% center;background-size:cover;opacity:0;animation:hp-shipyard 30s infinite}
.hp-login-photo:first-child{background-image:url('shipyard-v02/sea-sunrise-v03.png');opacity:1}
.hp-login-photo:nth-child(2){background-image:url('shipyard-v02/royal27.png');animation-delay:10s}
.hp-login-photo:nth-child(3){background-image:url('shipyard-v02/royal-moon.png');animation-delay:20s}
#login::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#06172620 15%,#06172666 47%,#061726e8 100%)}
.hp-login-caption{position:absolute;left:6%;bottom:7%;max-width:48%;color:#f3faff;text-shadow:0 2px 12px #000}
.hp-login-caption p{font-size:15px;letter-spacing:2px;margin:0 0 12px;color:#b6e5f7}.hp-login-caption h2{font-size:clamp(23px,3vw,44px);line-height:1.2;margin:0;font-weight:650}
#login .card{width:min(430px,100%);background:#102f46ed;border:1px solid #81b9d34d;border-radius:18px;color:#edf8ff;box-shadow:0 24px 80px #0006;backdrop-filter:blur(14px)}
#login .brand{background:#0b263680;padding:25px 24px 20px;border-bottom:1px solid #719bb638}
#login .brand .company-logo{width:88px;height:88px;margin-bottom:12px}#login .brand h1{font-size:24px}#login .brand p{font-size:14px;color:#add6ea}
#login .form{padding:26px}#login label{color:#e3f2fb;font-size:14px}#login .field input{background:#dcecf5;color:#102f46;border:1px solid #87adc4;min-height:46px}
#login .hint{background:#193e54;color:#c1dce9}#login .msg{color:#ffcdad}#login .btn-primary{background:#167caf;min-height:46px;font-size:15px}#login .btn-primary:hover{background:#2194c8}
.hp-login-version{margin-top:18px;text-align:center;color:#a9d0e4;font-size:13px}
#app .topbar{height:auto;min-height:100px;padding:18px 26px;gap:18px;flex-wrap:wrap;background:#102e48;border-bottom:1px solid #416782}
#app .topbar-title strong{font-size:clamp(17px,1.65vw,25px);line-height:1.25}#app .topbar-title small{font-size:14px;line-height:1.4;color:#9dcee4}
#app .topbar>div:last-child{flex-wrap:wrap;gap:10px!important}#app .logout,#app .back-global{background:#224f6d;color:#eaf6ff;border:1px solid #5b7f97}
#app .layout{display:block!important;min-height:calc(100vh - 100px)}
#app #sideMenu,#app #sideMenu:hover,#app #sideMenu:focus-within,#app #sideMenu.hp-nav-open{position:relative;top:auto;display:flex!important;flex-wrap:wrap;gap:8px;width:auto;height:auto;max-height:none;overflow:visible;padding:14px;margin:18px 24px 0;border-radius:14px;background:#102f4c;border:1px solid #315b78;box-shadow:0 8px 25px #04172633;transition:none}
#sideMenu>.hp-nav-toggle{display:none!important}
#app #sideMenu .menu,#app #sideMenu:hover .menu,#app #sideMenu:focus-within .menu{display:flex;align-items:center;justify-content:center;height:auto;min-height:54px;flex:1 1 135px;max-width:240px;margin:0;padding:10px 12px;border:1px solid #456e8c;border-radius:9px;background:#1a4566;text-align:center;overflow:visible}
#sideMenu .menu::before{display:none!important}#app #sideMenu .hp-nav-label{margin:0;width:auto;opacity:1;transition:none}
#app #sideMenu .menu:hover,#app #sideMenu .menu:focus-visible{background:#26658c;border-color:#88c5e3;outline:2px solid #8bd4ee;outline-offset:2px}
#app #sideMenu .menu.active{background:#217fa7;border-color:#7dd5ee;box-shadow:inset 0 -3px 0 #80d6eb}
#sideMenu .hp-lang-en{font-size:14px;line-height:1.25}#sideMenu .hp-lang-vi{font-size:13px;line-height:1.25;color:#b5dfee}#sideMenu .hp-bilingual{gap:4px}
#app .main{padding:22px 24px 30px;min-width:0}
#app .welcome{background:linear-gradient(115deg,#15466a,#176f96);color:#f3faff;border:1px solid #4d8cac;border-radius:14px;box-shadow:0 8px 25px #04172626}
#app .welcome h1{font-size:clamp(23px,2.5vw,34px)}#app .welcome p{color:#c8e4f1}#app .welcome .badge{background:#123c59;color:#bde6f4}
#app .panel,#app .module{background:#dceaf3;border:1px solid #a2bdce;border-radius:12px}#app .module{border-left:4px solid #3094b8}#app .module:hover{background:#cde3ef;box-shadow:0 8px 25px #04172633}#app .module h3{font-size:17px;color:#123e5c}#app .module p{color:#3d6278}
#app .stat,#app .kpi{background:#cbdfea}#app .footer{color:#b0ccdc}
#app .hp-alert-head h2{color:#deeff9}#app .hp-alert-head .hp-lang-en{color:#deeff9}#app .hp-alert-head .hp-lang-vi{color:#a5d7ec}
#app .grid{grid-template-columns:repeat(4,minmax(0,1fr))}#app .hp-pms-main{min-width:0}
@keyframes hp-shipyard{0%,28%{opacity:1}34%,94%{opacity:0}100%{opacity:1}}
@media(min-width:1600px){#app #sideMenu .menu{flex-basis:165px}}
@media(max-width:1000px){#app .grid{grid-template-columns:repeat(2,minmax(0,1fr))}#login{padding:32px 5%}.hp-login-caption{max-width:38%;left:5%}#app #sideMenu{margin:12px 14px 0}#app .main{padding:16px 14px}}
@media(max-width:650px){#login{justify-content:center;padding:28px 16px 110px}.hp-login-caption{left:18px;right:18px;bottom:24px;max-width:none}.hp-login-caption h2{font-size:20px}.hp-login-caption p{font-size:12px;margin-bottom:5px}#login::after{background:#071f3880}#login .card{background:#102f46f2}#app .topbar{padding:14px}.topbar-brand{gap:8px;min-width:0}.topbar-logo{width:44px;height:44px}#app .topbar-title strong{font-size:16px}#app .topbar-title small{font-size:12px}#app #sideMenu .menu{flex-basis:calc(50% - 8px);max-width:none;min-width:0}#app #sideMenu{padding:10px;gap:7px;margin:10px 10px 0}#app .main{padding:14px 10px}#app .grid{grid-template-columns:1fr}.welcome-brand{align-items:flex-start}.welcome-logo{width:56px;height:56px}#app .welcome{padding:18px}#app .userbox{text-align:left}}
@media(prefers-reduced-motion:reduce){.hp-login-photo{animation:none}.hp-login-photo:first-child{opacity:1}.hp-login-photo:not(:first-child){opacity:0}}
@media print{html,body{background:white!important}#app #sideMenu,#app .topbar{display:none!important}#app .main{padding:0}#app .panel{background:white;border:0}}