:root {
  /* Màu thương hiệu lấy từ logo Greensmart: xanh lá đậm của chữ G + xanh mạ của chấm tròn */
  --gs: #2e7d32; --gs-dam: #1b5e20; --gs-ma: #8bc34a; --gs-nhat: #edf7ee;
  --nen: #f3f5f4; --the: #ffffff; --chu: #10231a; --phu: #64748b; --vien: #e3e8e5;
  --chinh: var(--gs); --chinh-dam: var(--gs-dam); --do: #dc2626; --vang: #d97706; --xam: #94a3b8;
  --trong: #22c55e; --co-xe: #ef4444; --mat: #94a3b8; --chua-ro: #cbd5e1;
  --bo: 12px; --bong: 0 1px 2px rgba(16,35,26,.06), 0 4px 14px rgba(16,35,26,.07);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .than/.khung đặt display:grid — không có dòng này thì tab ẩn vẫn hiện */
html, body { margin: 0; height: 100%; background: var(--nen); color: var(--chu); font: 14px/1.45 var(--font); }
button, input, select, textarea { font: inherit; }
button { background: var(--chinh); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button:hover { background: var(--chinh-dam); }
button.phu { background: #fff; color: var(--chu); border: 1px solid var(--vien); }
button.phu:hover { background: #f1f5f9; }
button.nguy { background: var(--do); }
button.dang { outline: 2px solid var(--chinh); background: #dcfce7; color: var(--chinh-dam); }
input, select, textarea { border: 1px solid var(--vien); border-radius: 8px; padding: 6px 9px; background: #fff; width: 100%; }
label { display: block; margin: 8px 0 2px; color: var(--phu); font-size: 12px; }
h1, h2, h3 { margin: 0 0 8px; }
.phu { color: var(--phu); }
.loi { color: var(--do); }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px; }

/* đăng nhập */
body.dang-nhap { display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #c8e6c9 0, transparent 60%),
              radial-gradient(900px 500px at 110% 110%, #dcedc8 0, transparent 60%), var(--nen); }
body.dang-nhap form { width: min(380px, 100%); box-shadow: var(--bong); border: 0; padding: 28px 26px 24px; }
body.dang-nhap .logo-lon { display: block; width: 92px; height: auto; margin: 0 auto 10px; }
body.dang-nhap h1 { text-align: center; font-size: 22px; margin: 0; color: var(--gs-dam); letter-spacing: .2px; }
body.dang-nhap h1 em { font-style: normal; color: #fff; background: var(--gs); border-radius: 6px; padding: 0 7px; margin-left: 4px; }
body.dang-nhap .phu.giua { text-align: center; margin: 4px 0 14px; }
body.dang-nhap button { width: 100%; margin-top: 16px; padding: 11px; font-weight: 600; }
body.dang-nhap .chan { text-align: center; color: var(--phu); font-size: 12px; margin-top: 14px; }

/* khung quản lý */
.khung { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.dau { display: flex; gap: 14px; align-items: center; padding: 0 16px; min-height: 60px; background: #fff;
       border-bottom: 1px solid var(--vien); box-shadow: 0 1px 0 rgba(16,35,26,.03), 0 2px 10px rgba(16,35,26,.05);
       position: relative; z-index: 5; flex-wrap: wrap; }
.dau svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.thuong-hieu { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding-right: 14px;
               border-right: 1px solid var(--vien); margin-right: 2px; }
.thuong-hieu img { width: 36px; height: 36px; display: block; }
.chu-hieu { display: flex; flex-direction: column; line-height: 1.15; }
.chu-hieu b { font-size: 17px; color: var(--gs-dam); letter-spacing: .2px; white-space: nowrap; }
.chu-hieu b em { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--gs), var(--gs-ma));
                 border-radius: 5px; padding: 1px 6px; margin-left: 3px; vertical-align: 2px; letter-spacing: .8px; }
.chu-hieu small { font-size: 11px; color: var(--phu); white-space: nowrap; }
.chon-tang { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--gs); background: var(--gs-nhat);
             border: 1px solid #cfe5d1; border-radius: 10px; padding: 0 4px 0 10px; font-size: 14px; }
.chon-tang select { width: auto; border: 0; background: transparent; padding: 8px 6px; font-weight: 600; color: var(--gs-dam); cursor: pointer; }
.chon-tang select:focus { outline: none; }
.tabs { display: flex; gap: 2px; background: #eef1ef; border-radius: 11px; padding: 3px; }
.dau .tab { background: transparent; color: #475569; border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; }
.dau .tab:hover { background: rgba(255,255,255,.7); color: var(--gs-dam); }
.dau .tab.dang { background: #fff; color: var(--gs-dam); outline: none; box-shadow: 0 1px 3px rgba(16,35,26,.12); }
.dau .gian { flex: 1; }
.tim-nhanh { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--phu); background: #f4f6f5;
             border: 1px solid var(--vien); border-radius: 10px; padding: 0 10px; transition: border-color .15s, box-shadow .15s; }
.tim-nhanh:focus-within { border-color: var(--gs-ma); box-shadow: 0 0 0 3px rgba(139,195,74,.25); background: #fff; }
.tim-nhanh input { border: 0; background: transparent; padding: 8px 0; width: 170px; text-transform: uppercase; letter-spacing: .5px; }
.tim-nhanh input::placeholder { text-transform: none; letter-spacing: 0; }
.tim-nhanh input:focus { outline: none; }
.toi { display: flex; align-items: center; gap: 8px; color: var(--chu); }
.toi .chu-cai { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff;
                background: linear-gradient(135deg, var(--gs), var(--gs-ma)); }
.toi .ten-tk { display: flex; flex-direction: column; line-height: 1.15; }
.toi .ten-tk b { font-size: 13px; }
.toi .ten-tk small { font-size: 11px; color: var(--phu); }
.nut-vien { background: #fff; color: var(--phu); border: 1px solid var(--vien); padding: 7px; border-radius: 10px; display: grid; place-items: center; }
.nut-vien:hover { background: #fef2f2; color: var(--do); border-color: #fecaca; }
.than { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.vung-sa-ban { position: relative; overflow: hidden; background: #e8ece9; min-height: 0; }
.ben { border-left: 1px solid var(--vien); background: var(--the); overflow: auto; padding: 14px; }
.cong-cu { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 2px; z-index: 2; max-width: calc(100% - 24px);
           background: rgba(255,255,255,.96); border-radius: 12px; padding: 4px; box-shadow: var(--bong); }
.cong-cu button { padding: 6px 11px; font-size: 13px; border: 0; background: transparent; color: #334155; border-radius: 8px; font-weight: 500; }
.cong-cu button:hover { background: var(--gs-nhat); color: var(--gs-dam); }
.cong-cu button.dang { outline: none; background: var(--gs); color: #fff; }
.chu-thich { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.96); border-radius: 10px; padding: 7px 12px;
             font-size: 12px; z-index: 2; display: flex; gap: 12px; flex-wrap: wrap; box-shadow: var(--bong); }
.cham { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.so-lieu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.so-lieu div { background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 10px 6px 8px; text-align: center;
               font-size: 12px; color: var(--phu); position: relative; overflow: hidden; }
.so-lieu div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--xam); }
.so-lieu div:nth-child(1)::before { background: var(--trong); }
.so-lieu div:nth-child(2)::before { background: var(--co-xe); }
.so-lieu div:nth-child(4)::before { background: var(--gs); }
.so-lieu b { display: block; font-size: 24px; color: var(--chu); line-height: 1.2; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--vien); vertical-align: top; }
th { color: var(--phu); font-weight: 600; background: #f8fafc; }
.trang { padding: 16px; overflow: auto; }
.hang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nhan { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: #e2e8f0; }
.nhan.song, .nhan.trong { background: #dcfce7; color: #166534; }
.nhan.mat, .nhan.co_xe { background: #fee2e2; color: #991b1b; }
.thong-bao { position: fixed; right: 16px; bottom: 16px; background: #0f172a; color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; max-width: 420px; }
.thong-bao.loi { background: var(--do); }

/* SVG sa bàn */
svg.sa-ban { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
svg.sa-ban.dang-ve { cursor: crosshair; }
svg.sa-ban .o { stroke: #fff; stroke-width: 1.5; }
svg.sa-ban .o.trong { fill: var(--trong); }
svg.sa-ban .o.co_xe { fill: var(--co-xe); }
svg.sa-ban .o.mat_ket_noi { fill: var(--mat); }
svg.sa-ban .o.chua_ro { fill: var(--chua-ro); }
svg.sa-ban .o.khoa { fill: #475569; opacity: .6; }
svg.sa-ban .chon { stroke: #2563eb !important; stroke-width: 4 !important; }
svg.sa-ban .noi-bat { animation: nhay 1s infinite; }
@keyframes nhay { 50% { opacity: .25; } }
svg.sa-ban text { font-family: var(--font); pointer-events: none; }

/* màn vẽ ROI trên ảnh camera */
.roi-khung { position: relative; display: inline-block; max-width: 100%; }
.roi-khung img { display: block; max-width: 100%; }
.roi-khung svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

/* kiosk */
body.kiosk { display: grid; grid-template-columns: 420px 1fr; height: 100vh; }
.kiosk .trai { background: linear-gradient(180deg, #11261a 0%, #0f1f17 100%); color: #fff; padding: 22px 24px; display: flex;
               flex-direction: column; gap: 14px; overflow: auto; }
.kiosk-hieu { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.kiosk-logo { width: 46px; height: 46px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; }
.kiosk-hieu .chu-hieu b { color: #fff; font-size: 19px; }
.kiosk-hieu .chu-hieu small { color: #9fb8a8; }
.kiosk .trai h1 { margin-top: 4px; }
.kiosk .trai h1 { font-size: 26px; }
.kiosk .o-nhap { font-size: 34px; letter-spacing: 2px; text-align: center; text-transform: uppercase; padding: 12px; border-radius: 12px; }
.kiosk .ban-phim { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.kiosk .ban-phim button { font-size: 22px; padding: 14px 0; background: #1d3527; border-radius: 10px; }
.kiosk .ban-phim button:hover { background: #26442f; }
.kiosk .ban-phim button.rong2 { grid-column: span 2; }
.kiosk .ban-phim button.tim { background: linear-gradient(135deg, var(--gs), var(--gs-ma)); grid-column: span 3; font-weight: 700; }
.kiosk .ket-qua { background: #1d3527; border-radius: 12px; padding: 14px; }
.kiosk .ket-qua .lon { font-size: 30px; font-weight: 700; color: #a5d66b; }
.kiosk .ket-qua img { width: 100%; border-radius: 8px; margin-top: 8px; }
.kiosk .phai { position: relative; background: #e5e7eb; }
.kiosk .dem-khu { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; flex-wrap: wrap; justify-content: flex-end; }
.kiosk .dem-khu div { background: rgba(17,38,26,.9); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 18px; }
.kiosk .dem-khu b { color: #a5d66b; font-size: 24px; margin-left: 6px; }
@media (max-width: 900px) {
  .than { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ben { border-left: 0; border-top: 1px solid var(--vien); max-height: 45vh; }
  body.kiosk { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* thanh đầu co giãn: một hàng tới 1100 px, hẹp hơn thì gọn dần */
@media (max-width: 1360px) {
  .dau .chu-hieu small, .toi .ten-tk { display: none; }
  .tim-nhanh input { width: 130px; }
  .dau .tab { padding: 7px 11px; }
}
@media (max-width: 1100px) {
  .dau { gap: 8px; padding: 8px 12px; }
  .thuong-hieu { border-right: 0; padding-right: 0; }
  .tabs { order: 10; width: 100%; overflow-x: auto; }
  .dau .tab { flex: 1; white-space: nowrap; }
  .tim-nhanh input { width: 110px; }
}

/* giả lập chỉ đường (trang quản lý) */
.chi-duong { background: linear-gradient(180deg, var(--gs-nhat), #fff); border: 1px solid #cfe5d1; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.chi-duong-dau { display: flex; align-items: center; gap: 8px; color: var(--gs-dam); }
.chi-duong-dau svg { width: 18px; height: 18px; fill: var(--gs-ma); stroke: var(--gs); stroke-width: 1.5; stroke-linejoin: round; }
.chi-duong .tom-tat { margin-top: 10px; background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 10px; }
.chi-duong .tom-tat .o-lon { font-size: 20px; font-weight: 800; color: var(--gs-dam); }
.chi-duong .tom-tat .so-do-km { display: flex; gap: 14px; margin-top: 4px; color: var(--phu); font-size: 12px; }
.chi-duong .tom-tat .so-do-km b { color: var(--chu); font-size: 15px; }
.chi-duong ol.buoc { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: b; }
.chi-duong ol.buoc li { counter-increment: b; display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--vien); font-size: 13px; }
.chi-duong ol.buoc li::before { content: counter(b); width: 20px; height: 20px; border-radius: 50%; background: var(--gs); color: #fff;
                                display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.chi-duong ol.buoc li .mui { width: 18px; text-align: center; font-weight: 700; color: var(--gs); }
svg.sa-ban .moc-re { fill: #fff; stroke: #2563eb; stroke-width: 3; }
svg.sa-ban .ban-o-day { fill: #2563eb; stroke: #fff; stroke-width: 4; }
.kiosk ol.kiosk-buoc { margin: 10px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.6; color: #e2efe6; }

/* luồng tìm xe → chỉ đường */
/* nét gạch trôi 21 đv (một chu kỳ gạch) mỗi 3 s — chậm, dễ nhìn hướng đi */
svg.sa-ban .duong { fill: none; stroke: #2563eb; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
                    stroke-dasharray: 12 9; animation: chay 3s linear infinite; }
@keyframes chay { to { stroke-dashoffset: -21; } }
/* máy tìm xe + người đứng trước màn hình */
svg.sa-ban .may-than { fill: #0f766e; stroke: #fff; stroke-width: 2; }
svg.sa-ban .may-man { fill: #99f6e4; }
svg.sa-ban .nhan-may { fill: #0f766e; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
svg.sa-ban .nguoi-nhin { fill: #0f766e; opacity: .14; }
svg.sa-ban .nguoi-vai { fill: #334155; stroke: #fff; stroke-width: 1.5; }
svg.sa-ban .nguoi-dau { fill: #f1c27d; stroke: #334155; stroke-width: 1.5; }
svg.sa-ban .nguoi-mui { fill: #334155; }
svg.sa-ban .dang-dung .nhan-may { display: none; }
svg.sa-ban .dang-dung .nguoi-vai, svg.sa-ban .dang-dung-nguoi .nguoi-vai { fill: #1d4ed8; }
svg.sa-ban .dang-dung .nguoi-nhin, svg.sa-ban .dang-dung-nguoi .nguoi-nhin { fill: #2563eb; opacity: .28; }
svg.sa-ban .dang-dung .nguoi-mui, svg.sa-ban .dang-dung-nguoi .nguoi-mui { fill: #1d4ed8; }
svg.sa-ban .duong-vien { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
svg.sa-ban .mui-duong { fill: #1d4ed8; stroke: #fff; stroke-width: 1.5; }
svg.sa-ban .ban-o-day-song { fill: #2563eb; opacity: .18; animation: song 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes song { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.4); opacity: 0; } }
svg.sa-ban .nhan-ban-o-day { fill: #1d4ed8; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
svg.sa-ban .ct-day { stroke: #dc2626; stroke-width: 2.5; stroke-dasharray: 5 4; }
svg.sa-ban .ct-diem { fill: #dc2626; stroke: #fff; stroke-width: 2; }
svg.sa-ban .ct-the { fill: #fff; stroke: #dc2626; stroke-width: 2.5; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
svg.sa-ban .ct-bien { fill: #10231a; font-weight: 800; }.chi-duong .phu.nho { margin-left: auto; padding: 2px 8px; font-size: 12px; }
.xe-tim-thay { background: #fff; border: 1px solid #fecaca; border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.xe-tim-thay img { width: 100%; border-radius: 8px; margin: 8px 0; display: block; }
.xe-tieu-de { display: flex; align-items: center; gap: 8px; }
.xe-tieu-de b { font-size: 18px; letter-spacing: .5px; }
.xe-dong { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--vien); }
.xe-dong span { color: var(--phu); }

/* camera lỗi: luôn hiện, nháy đỏ */
svg.sa-ban .cam-loi-diem { fill: #dc2626; stroke: #fff; stroke-width: 2; animation: nhay-do .9s ease-in-out infinite; }
svg.sa-ban .cam-loi-song { fill: #dc2626; opacity: .25; animation: song 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
svg.sa-ban .cam-loi-chu { fill: #b91c1c; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
@keyframes nhay-do { 50% { fill: #fff; } }

/* nút ẩn/hiện lớp trên sa bàn (góc dưới trái) */
.chu-thich .tach { width: 1px; background: var(--vien); align-self: stretch; }
.chu-thich .bat-tat { display: flex; gap: 6px; align-items: center; }
.chu-thich .bat-tat span.ten { color: var(--phu); }
.chu-thich .bat-tat button { padding: 2px 9px; font-size: 12px; border-radius: 99px; border: 1px solid var(--vien); background: #fff; color: #64748b; }
.chu-thich .bat-tat button.bat { background: var(--gs); border-color: var(--gs); color: #fff; }
.chu-thich .bat-tat button:hover { border-color: var(--gs); }

/* nhiều xe khớp khi tìm */
.ds-khop { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ds-khop button { display: flex; gap: 10px; align-items: center; text-align: left; background: #fff; color: var(--chu);
                  border: 1px solid var(--vien); border-radius: 10px; padding: 6px; }
.ds-khop button:hover { border-color: var(--gs); background: var(--gs-nhat); }
.ds-khop img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; background: #e2e8f0; flex: none; }
.ds-khop b { display: block; font-size: 14px; }
.ds-khop small { color: var(--phu); }