.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:10px;align-items:stretch}:root{--max-card-height:430px}.card{background:#fff;border-radius:5px;padding:0 15px 10px 15px;border:1px solid #ddd;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;max-height:var(--max-card-height);overflow:hidden;transition:max-height .3s ease;width:100%;margin:0}.card.wide-card{grid-column:span 2}@media (max-width:600px) and (orientation:portrait){.dashboard-grid{display:grid;grid-template-columns:1fr!important;gap:10px;justify-items:center}.card{width:100%;max-width:calc(100vw - 20px);margin:0 auto;height:auto!important;max-height:none!important;overflow:visible!important}.card.wide-card{grid-column:span 1!important}.card.scrollon{max-height:75vh!important;overflow:hidden!important;display:flex;flex-direction:column}.card.scrollon .scroll-list{flex:1;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-right:5px}.card.scrollon .scroll-list::-webkit-scrollbar{width:6px}.card.scrollon .scroll-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:10px}.card.has-scroll-fade::after{display:none!important}}.card canvas{width:100%!important;height:auto!important}@media (min-width:601px){.card.has-scroll-fade{position:relative;max-height:var(--max-card-height,250px);overflow:hidden;cursor:pointer;transition:all .3s ease}.card.has-scroll-fade:hover{box-shadow:0 4px 12px rgba(0,0,0,.15)}.card.has-scroll-fade>:not(.card-close){pointer-events:none}.card.has-scroll-fade::before{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to top,#b7dbfb,transparent);pointer-events:none;z-index:2;transition:opacity .3s ease;opacity:1}.card.has-scroll-fade::after{content:'Xem đầy đủ';position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:rgba(0,123,255,.95);color:#fff;padding:8px 24px;border-radius:20px;font-size:13px;font-weight:600;z-index:3;pointer-events:none;opacity:1;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,123,255,.3)}.card.has-scroll-fade:hover::after{background:#007bff;transform:translateX(-50%) scale(1.05)}.card.has-scroll-fade.expanded{position:fixed!important;top:50%;left:50%;transform:translate(-50%,-50%);width:30vw!important;min-width:400px;max-height:90vh!important;overflow-y:auto!important;z-index:9999;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:expandIn .5s cubic-bezier(.4,0,.2,1)}.card.has-scroll-fade.expanded::after,.card.has-scroll-fade.expanded::before{opacity:0;pointer-events:none}.card.has-scroll-fade.expanded>*{pointer-events:auto!important}.card-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9998;display:none;animation:fadeIn .4s ease-out}.card-overlay.active{display:block}.card.has-scroll-fade.expanded .card-close{display:flex!important}.card-close{display:none;position:absolute;top:-15px;right:-15px;width:44px;height:44px;background:#dc3545;color:#fff;border:3px solid #fff;border-radius:50%;font-size:28px;line-height:1;font-weight:300;cursor:pointer;z-index:10001;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .2s;pointer-events:auto!important;margin:0}.card-close:hover{background:#c82333;transform:rotate(90deg) scale(1.1);box-shadow:0 6px 16px rgba(220,53,69,.6)}@keyframes expandIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}}@media (max-width:600px){.card.has-scroll-fade{max-height:none!important;overflow:visible!important;cursor:default}.card.has-scroll-fade::after,.card.has-scroll-fade::before{display:none!important}}body.dark .card{background:#343a40;border:1px solid #343a40}body.dark .card.has-scroll-fade::before{background:linear-gradient(to top,#202124,transparent)}body.dark .card.has-scroll-fade.expanded{background:#2d3748}.scrollable{overflow-y:auto}.card-name{position:sticky;top:0;z-index:10;background:#fff;font-size:20px;font-weight:700;color:#374151;padding:15px 0 10px 0;text-align:center}@media (max-width:600px) and (orientation:portrait){.card-name{position:static;top:auto}}body.dark .card-name{color:#e5e7eb;background:#343a40}.stat-number{font-size:18px;font-weight:700;color:#111827}body.dark .stat-number{color:#e5e7eb}.stat-desc{font-size:.9rem;color:#6b7280}body.dark .stat-desc{color:#e5e7eb}.list-item{padding:5px;font-size:14px;color:#374151;display:flex;justify-content:space-between}.list-item:hover{background:#ecf6ff}body.dark .list-item:hover{background:#2a2a2a}body.dark .list-item:hover{background:#444}body.dark .list-item{color:#e5e7eb}.border-bottom{border-bottom:1px solid #edecec;padding-bottom:5px}body.dark .border-bottom{border-bottom:1px solid #444}.up{color:green}body.dark .up{color:#10b981}.down{color:red}body.dark .down{color:#ef4444}.piechart-placeholder{width:100%;height:180px;background:repeating-conic-gradient(#3b82f6 0 30%,#10b981 30% 55%,#ef4444 55% 75%,#e5e7eb 75% 100%);border-radius:50%;margin:auto}.stat-block{margin-bottom:10px}.stat-block .metric{font-weight:700}.stat-block .value{font-size:1.2em}.stat-block small{color:gray;margin-left:6px}#productionChart{min-height:320px;width:100%}#defectPieChart{width:auto!important;height:280px!important}#defectTypeChart{width:auto!important;height:280px!important}#exportVsLocalChart{width:auto!important;height:220px!important}#productionPieChart{width:auto!important;height:170px!important}