:root{--main:#087f7a;--main2:#0b63f6;--dark:#0f172a;--muted:#64748b;--bg:#f3f7f7;--card:#fff;--line:#e2e8f0;--red:#dc2626;--green:#16a34a;--orange:#b77900}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--dark);font-size:15px}a{color:#0b63f6;text-decoration:none}a:hover{text-decoration:underline}.hidden{display:none!important}.top{height:66px;background:linear-gradient(135deg,var(--main),#055f5b);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.brand{font-size:21px;font-weight:800}.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 66px)}.side{background:linear-gradient(180deg,#0b4a6f,#053c3a);color:#fff;padding:14px}.side a,.side button{display:block;width:100%;text-align:left;color:#d1fae5;background:transparent;border:0;padding:10px;border-radius:10px;margin:4px 0;cursor:pointer;font-weight:700}.side a.active,.side a:hover,.side button:hover{background:#fff;color:var(--main)}.main{padding:18px;max-width:1360px;width:100%;margin:0 auto}.card{background:var(--card);border:1px solid #eef2f7;border-radius:15px;box-shadow:0 2px 10px #0001;padding:15px;margin:12px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}input,select,textarea{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--main);box-shadow:0 0 0 3px rgba(8,127,122,.13)}button,.btn{padding:10px 13px;border:0;border-radius:9px;background:var(--main);color:#fff;cursor:pointer;font-weight:800}button:hover,.btn:hover{filter:brightness(.95)}button.light,.btn.light{background:#e2e8f0;color:#0f172a}button.gray{background:#64748b;color:#fff}button.red{background:#dc2626}button.orange{background:#b77900}.small{padding:7px 9px;font-size:13px}.muted{color:var(--muted);font-size:13px}.ok{color:#047857}.bad{color:#dc2626}.pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#e2e8f0;color:#0f172a}.pill.ok{background:#dcfce7;color:#047857}.pill.bad{background:#fee2e2;color:#dc2626}.big{font-size:28px;font-weight:900}.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.device{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;min-height:150px;text-align:center}.device.on{border-color:#86efac;background:#f0fdf4}.iconbig{font-size:34px}.qr{width:160px;height:160px;image-rendering:pixelated}pre{white-space:pre-wrap;word-break:break-word;background:#0f172a;color:#d1fae5;padding:12px;border-radius:12px;overflow:auto}table{width:100%;border-collapse:collapse;background:#fff}td,th{border-bottom:1px solid #e2e8f0;padding:9px;text-align:left;vertical-align:top}th{background:#eef6f6}.toast{position:fixed;right:18px;bottom:18px;background:#0f172a;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 4px 18px #0003;z-index:9999}.password-wrap{display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:9px;background:#fff;overflow:hidden}.password-wrap input{border:0;flex:1;min-width:0}.password-wrap .eye{background:#e2e8f0;color:#0f172a;border-radius:0;margin:0;padding:10px 12px}.login-wrap{min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:18px}.login-card{width:100%;max-width:450px;background:#fff;border-radius:18px;padding:26px;box-shadow:0 8px 28px rgba(15,23,42,.12);border:1px solid #e2e8f0}.login-card label{display:block;font-weight:700;margin:14px 0 6px}@media(max-width:900px){.layout{display:block}.side{position:relative}.grid2{grid-template-columns:1fr}.main{padding:10px}.top{height:auto;min-height:60px}.side a{display:inline-block;width:auto}}
/* =====================================================
 *  THANHIOT - MOBILE / DESKTOP VIEW MODE
 *  ===================================================== */

/* Mặc định desktop */
body.view-desktop {
    --app-sidebar-width: 235px;
    --app-content-padding: 22px;
    --app-card-radius: 18px;
}

/* Desktop: menu bên trái, nội dung rộng */
body.view-desktop .app-layout,
body.view-desktop .khach-layout,
body.view-desktop .page-layout {
    display: grid;
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    gap: 20px;
}

body.view-desktop .side,
body.view-desktop .sidebar,
body.view-desktop .left-menu {
    width: var(--app-sidebar-width);
}

body.view-desktop .relay-grid,
body.view-desktop .device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
}

/* Mobile */
body.view-mobile {
    --app-content-padding: 10px;
    --app-card-radius: 14px;
}

/* Mobile: 1 cột, menu ngang/cuộn */
body.view-mobile .app-layout,
body.view-mobile .khach-layout,
body.view-mobile .page-layout {
    display: block;
}

body.view-mobile .side,
body.view-mobile .sidebar,
body.view-mobile .left-menu {
    width: 100% !important;
    max-width: 100% !important;
}

body.view-mobile main,
body.view-mobile .content,
body.view-mobile .main {
    padding: 10px !important;
}

/* Mobile: card gọn hơn */
body.view-mobile .card,
body.view-mobile .home-card,
body.view-mobile section {
    border-radius: 14px !important;
}

/* Mobile: thiết bị 2 cột hoặc 1 cột tùy màn */
body.view-mobile .relay-grid,
body.view-mobile .device-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

/* Màn rất nhỏ */
@media (max-width: 390px) {
    body.view-mobile .relay-grid,
    body.view-mobile .device-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Desktop: khối thông số điện nhỏ nhưng rộng */
body.view-desktop #boxThongSoDienTrangChuNoFlash,
body.view-desktop #boxThongSoDienTrangChu {
    max-width: 100%;
}

/* Mobile: thông số điện nhỏ hơn */
body.view-mobile #boxThongSoDienTrangChuNoFlash,
body.view-mobile #boxThongSoDienTrangChu {
    padding: 10px !important;
}

body.view-mobile #listThongSoDienTrangChuNoFlash,
body.view-mobile #danhSachThongSoDienTrangChu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

body.view-mobile .metric-card {
    padding: 7px !important;
    min-height: 48px !important;
}

body.view-mobile .metric-card div:first-child {
    font-size: 11px !important;
}

body.view-mobile .metric-card div:nth-child(2) {
    font-size: 15px !important;
}