/* ══════════════════════════════════════════════════════════════════════════════════════ 🖥️ 23/09/2026 — GIAO DIỆN MÁY TÍNH "CHÉP KHUÔN WEB CŨ" (anh Chức chốt 16:12: "1. ok theo · 2 như cũ · 3 khách nhắn cskh"). Khách máy tính quen khachhang.ecolo.vn ⇒ khung ở đây chép đúng web cũ: cột trái trắng (khối xám Dư ví/Hạng + menu), thanh trên trắng (☰ · chuông · TÊN ▾), nền xám xanh #d8dce3, tiêu đề nhỏ in hoa, bảng đầu cam #ef9c13, dải tab xám #646262 (tab chọn #ffb648), thanh đáy tối #49494a. Chức năng bên dưới là của dathang (tiền, cọc, QR nạp… y điện thoại). ⚖️ ĐIỆN THOẠI KHÔNG ĐỔI MỘT ĐIỂM ẢNH: mọi luật dưới đây chỉ ăn khi . Lớp `mt` do đoạn script ở đặt: màn ≥1024px + có CHUỘT (hover + con trỏ mịn) và khách KHÔNG tự chọn "giao diện điện thoại" (localStorage ecolo_gd = 'dt'). Phần JS (cột trái, thanh trên, các trang bảng) ở /may-tinh.js. ══════════════════════════════════════════════════════════════════════════════════════ */ /* 🧩 Extension ECOLO.VN tự chèn css/main.css vào mọi trang *.ecolo.vn, trong đó có `h1{text-transform:uppercase;margin-bottom:25px}` — chặn lại để tiêu đề không bị đội. */ html body h1{margin-bottom:0} html.mt{--mt-nen:#d8dce3;--mt-cam:#ef9c13;--mt-cam-sang:#ffb648;--mt-tab:#646262;--mt-day:#49494a; --mt-chu:#3c4257;--mt-vien:#e4e6eb;--mt-ben:220px;--mt-dau:64px} html.mt body{background:var(--mt-nen);color:#333;font-family:Roboto,"Segoe UI",-apple-system,Arial,sans-serif;font-size:14px} html.mt #thanh-tren,html.mt .gio-noi{display:none!important} html.mt main{max-width:none;margin:0 0 0 var(--mt-ben);padding:calc(var(--mt-dau) + 22px) 20px 96px} html.mt.mt-thu main{margin-left:0} /* ─────────────────────────────── cột trái ─────────────────────────────── */ #mt-ben,#mt-dau,#mt-day{display:none} html.mt #mt-ben{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--mt-ben); background:#fff;z-index:35;overflow-y:auto;box-shadow:1px 0 0 rgba(0,0,0,.04)} html.mt.mt-thu #mt-ben{display:none} #mt-ben .logo{height:var(--mt-dau);display:flex;align-items:center;padding:0 18px;font-weight:800;font-size:21px; color:#F0632B;letter-spacing:.5px;text-decoration:none;flex:none} #mt-ben .logo small{font-size:11px;color:#999;font-weight:400;margin-left:8px;letter-spacing:0} #mt-ben .khoi-vi{background:#7e7e7e;color:#eee;padding:16px 15px 14px;font-size:14.5px;line-height:1.75;flex:none} #mt-ben .khoi-vi .vi{color:var(--mt-cam-sang)} #mt-ben .khoi-vi .ten{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mt-ben .khoi-vi .doi-nut{display:flex;gap:8px;margin-top:8px} #mt-ben .khoi-vi .doi-nut button{flex:1;border:1px solid #fff;background:transparent;color:#fff;padding:6px 0;font-size:12.5px; cursor:pointer;border-radius:2px} #mt-ben .khoi-vi .doi-nut button.cam{background:var(--mt-cam);border-color:var(--mt-cam)} #mt-ben nav{flex:none} #mt-ben nav button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid #eee;background:#fff; padding:15px 20px;font-size:14.5px;font-weight:700;color:var(--mt-chu);cursor:pointer;text-align:left} #mt-ben nav button:hover{background:#f7f7f7} #mt-ben nav button.on{background:#f1f1f1} #mt-ben nav button svg{width:17px;height:17px;flex:none;fill:currentColor;opacity:.85} #mt-ben nav button .mt-dem{margin-left:auto;background:#e53935;color:#fff;border-radius:10px;padding:0 7px;font-size:11.5px;line-height:18px} #mt-ben nav button .mt-dem[hidden]{display:none} #mt-ben nav button .moi{margin-left:auto;background:#F0632B;color:#fff;border-radius:3px;padding:0 5px;font-size:10px;line-height:16px;font-weight:700} #mt-ben nav .tach{height:8px;background:#f4f5f7;border-bottom:1px solid #eee} /* thẻ tiện ích ECOLO dưới menu */ #mt-ti{margin:14px 12px 16px;border:1px dashed #cfd3da;border-radius:4px;padding:12px;font-size:12.5px;color:#555;line-height:1.5} #mt-ti b{color:var(--mt-chu);font-size:13px;display:flex;align-items:center;gap:7px} #mt-ti b svg{width:16px;height:16px;fill:#F0632B} #mt-ti p{margin-top:5px} #mt-ti .xanh{color:#0f7a43;font-weight:700} #mt-ti a,#mt-ti button{display:block;width:100%;margin-top:9px;text-align:center;background:var(--mt-cam);color:#fff;border:0; padding:8px 0;font-size:12.5px;font-weight:700;border-radius:2px;cursor:pointer;text-decoration:none;text-transform:uppercase} #mt-ti button.vien{background:#fff;color:var(--mt-chu);border:1px solid #cfd3da} /* ─────────────────────────────── thanh trên ─────────────────────────────── */ html.mt #mt-dau{display:flex;align-items:center;position:fixed;top:0;right:0;left:var(--mt-ben);height:var(--mt-dau); background:#fff;z-index:34;padding:0 22px 0 14px;gap:6px;box-shadow:0 1px 0 rgba(0,0,0,.05)} html.mt.mt-thu #mt-dau{left:0} #mt-dau button{background:none;border:0;cursor:pointer;color:#6b6f82} #mt-dau .nut-menu{padding:8px;margin-right:auto} #mt-dau .nut-menu svg{width:22px;height:22px;fill:#6b6f82;display:block} #mt-dau .nut-gio,#mt-dau .nut-chuong{position:relative;padding:8px 10px} #mt-dau .nut-gio svg,#mt-dau .nut-chuong svg{width:22px;height:22px;fill:#6b6f82;display:block} #mt-dau .mt-dem{position:absolute;top:0;right:1px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#f44336; color:#fff;font-size:11px;line-height:19px;text-align:center;display:none} #mt-dau .mt-dem.co{display:block} #mt-dau .nut-ten{font-size:14.5px;text-transform:uppercase;padding:8px 6px 8px 14px;letter-spacing:.3px;max-width:260px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mt-dau .nut-ten::after{content:'';display:inline-block;margin-left:8px;border:4px solid transparent;border-top-color:#6b6f82;border-bottom:0;vertical-align:3px} #mt-dau .nut-dn{border:1px solid var(--mt-cam)!important;color:var(--mt-cam)!important;padding:7px 14px!important;font-size:13px;margin-left:10px; border-radius:2px;text-transform:uppercase;font-weight:700} #mt-dau .nut-dn.dac{background:var(--mt-cam)!important;color:#fff!important} #mt-xo{position:fixed;top:58px;right:18px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.16);border-radius:3px;z-index:60;min-width:220px;padding:6px 0} #mt-xo[hidden]{display:none} #mt-xo button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 18px;font-size:14px;color:#333;cursor:pointer} #mt-xo button:hover{background:#f5f5f5} #mt-xo hr{border:0;border-top:1px solid #eee;margin:5px 0} /* ─────────────────────────────── thanh đáy tối ─────────────────────────────── */ html.mt #mt-day:not([hidden]){display:flex;align-items:center;gap:14px;position:fixed;left:var(--mt-ben);right:0;bottom:0;min-height:58px; background:var(--mt-day);color:#fff;padding:8px 10px 8px 12px;z-index:30;font-size:15px} html.mt.mt-thu #mt-day{left:0} #mt-day .chu{white-space:nowrap} #mt-day .chu b,#mt-day .cam{color:var(--mt-cam-sang);font-weight:400} #mt-day .phai{margin-left:auto;display:flex;gap:8px} .mt-nut{border:0;border-radius:2px;padding:0 22px;height:40px;font-size:13px;text-transform:uppercase;cursor:pointer; background:var(--mt-cam);color:#222;letter-spacing:.2px;white-space:nowrap} .mt-nut:disabled{opacity:.55;cursor:default} .mt-nut.trang{background:#fff;color:#555;border:1px solid #ccc} .mt-nut.tim{background:#9732f3;color:#fff} .mt-nut.xanh{background:#17a2b8;color:#fff} .mt-nut.do{background:#d9534f;color:#fff} .mt-nut.xanh-la{background:#28a745;color:#fff} .mt-nut.rong{min-width:300px} .mt-tab-day{display:flex;border:2px solid var(--mt-cam);border-radius:2px;overflow:hidden} .mt-tab-day button{background:transparent;color:var(--mt-cam);border:0;padding:0 14px;height:40px;font-weight:700;font-size:13px;cursor:pointer;text-transform:uppercase} .mt-tab-day button.on{background:var(--mt-cam);color:#222} /* ─────────────────────────────── linh kiện trang ─────────────────────────────── */ .mt-tieu{font-size:12.5px;font-weight:700;color:var(--mt-chu);text-transform:uppercase;display:flex;align-items:center;gap:5px;margin:0 0 18px} .mt-tieu svg{width:15px;height:15px;fill:var(--mt-chu)} .mt-tieu a{color:var(--mt-chu);text-decoration:none;cursor:pointer} .mt-tieu .gach{margin:0 4px;color:#888} .mt-the{background:#fff;padding:20px;margin-bottom:14px;border-radius:2px} .mt-the>.mt-dt{font-size:13px;font-weight:700;color:#222;text-transform:uppercase;padding-bottom:16px;border-bottom:1px solid #eee;margin-bottom:18px} .mt-tabs{display:flex;flex-wrap:wrap;background:var(--mt-tab);margin-bottom:14px;border-radius:2px} .mt-tabs button{background:none;border:0;color:#fff;font-size:12px;text-transform:uppercase;padding:0 20px;height:45px;cursor:pointer;letter-spacing:.2px} .mt-tabs button.on{background:var(--mt-cam-sang)} .mt-tabs button .so{display:inline-block;background:#8f8f8f;color:#fff;border-radius:9px;padding:0 6px;font-size:10.5px;line-height:16px;margin-left:5px} .mt-tabs button.on .so{background:#7e7e7e} .mt-tim{display:block;width:100%;background:#fff;border:0;border-bottom:1px solid #d6d9df;padding:12px;font-size:13px;outline:none;margin-bottom:10px} .mt-tim:focus{border-bottom-color:var(--mt-cam)} .mt-tk{background:#fff;margin-bottom:10px;border-top:1px dashed #b9bdc6;padding-top:0} .mt-tk summary{list-style:none;cursor:pointer;padding:12px 10px;font-weight:700;font-size:13px;text-transform:uppercase;color:#222;display:flex} .mt-tk summary::-webkit-details-marker{display:none} .mt-tk summary::after{content:'';margin-left:auto;border:5px solid transparent;border-bottom-color:#333;border-top:0;align-self:center} .mt-tk:not([open]) summary::after{border-bottom:0;border-top:5px solid #333} .mt-tk .dong{display:flex;gap:10px;margin:0 15px;padding:12px 0;border-bottom:1px dashed #ccc;font-size:13px;font-weight:700;text-transform:uppercase} .mt-tk .dong:last-child{border-bottom:0} .mt-tk .dong span{width:320px;color:#1f6fb2} .mt-tk .dong span::before{content:'• ';color:var(--mt-cam)} .mt-tk .dong b{color:#1f6fb2} .mt-tk .dong.den span,.mt-tk .dong.den b{color:#222} table.mt-bang{width:100%;border-collapse:collapse;background:#fff;font-size:14px} .mt-bang th{background:var(--mt-cam);color:#fff;font-size:12.5px;font-weight:700;text-transform:uppercase;text-align:left;padding:12px 10px; border-right:1px solid rgba(255,255,255,.35);white-space:nowrap} .mt-bang th:last-child{border-right:0} .mt-bang td{padding:10px;border-bottom:1px solid #eee;vertical-align:middle;color:#333} .mt-bang tr.bam{cursor:pointer} .mt-bang tr.bam:hover td{background:#fafbfc} .mt-bang .so{text-align:right;white-space:nowrap} .mt-bang .giua{text-align:center} .mt-bang img{width:60px;height:60px;object-fit:cover;display:block;background:#f1f1f1} .mt-bang input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--mt-cam)} .mt-bang input[type=checkbox]:disabled{cursor:default;opacity:.35} .mt-bang .trong td{text-align:center;color:#888;padding:40px 10px} .mt-nhan{display:block;min-width:150px;text-align:center;color:#fff;padding:7px 8px;border-radius:2px;font-size:14px;white-space:nowrap} .mt-lk{color:#1f6fb2;cursor:pointer;text-decoration:none} .mt-lk:hover{text-decoration:underline} .mt-trang-so{display:flex;justify-content:flex-end;margin:16px 0} .mt-trang-so button{min-width:40px;height:42px;border:1px solid #e3e3e3;background:#fff;color:#555;font-size:15px;cursor:pointer;margin-left:-1px} .mt-trang-so button.on{background:var(--mt-cam);color:#fff;border-color:var(--mt-cam)} .mt-trang-so button:disabled{color:#bbb;cursor:default} .mt-luoi{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px} .mt-luoi .ca{grid-column:1 / -1} .mt-o label{display:block;font-size:14.5px;color:#333;margin:8px 0 6px} .mt-o input,.mt-o textarea,.mt-o select{width:100%;border:1px solid #cfd3da;border-radius:2px;padding:10px 12px;font-size:14px;background:#fff;outline:none;color:#222} .mt-o input:focus,.mt-o textarea:focus,.mt-o select:focus{border-color:var(--mt-cam)} .mt-o input[readonly]{background:#f6f7f9;color:#555} .mt-bao{margin-top:12px} .mt-ghi{color:#e53935;font-size:14px;line-height:1.6} .mt-giua{text-align:center;color:#666;padding:36px 10px} .mt-cho{height:120px;background:linear-gradient(90deg,#eceef1 25%,#f6f7f9 37%,#eceef1 63%);background-size:400% 100%;animation:chay 1.2s infinite} .mt-chon{display:flex;flex-wrap:wrap;gap:12px 46px;align-items:flex-start;margin-bottom:18px} .mt-chon label{display:flex;align-items:center;gap:7px;color:#e53935;font-size:14.5px;cursor:pointer;margin:0} .mt-chon input{width:15px;height:15px;accent-color:var(--mt-cam)} .mt-chon select{border:1px solid #cfd3da;padding:9px 10px;font-size:13.5px;min-width:190px;margin-top:6px;border-radius:2px} .mt-dong-sp td{background:#fff4f2;padding:8px 6px} .mt-dong-sp input{width:100%;border:1px solid #cfd3da;border-radius:2px;padding:9px 8px;font-size:13.5px;outline:none;background:#fff} .mt-dong-sp input:focus{border-color:var(--mt-cam)} .mt-dong-sp input.sai{border-color:#e53935;background:#fff7f7} .mt-dong-sp .anh-o{display:flex;align-items:center;gap:6px} .mt-dong-sp .anh-o img{width:44px;height:44px;object-fit:cover} .mt-dong-sp .nut-anh{border:1px solid #ddd;background:#fff;color:#e53935;font-weight:700;padding:8px 10px;font-size:13px;cursor:pointer;white-space:nowrap} .mt-dong-sp .xoa{border:0;background:none;color:#999;font-size:20px;cursor:pointer;padding:0 4px} .mt-nut-nho{background:#1f6fb2;color:#fff;border:0;border-radius:2px;padding:7px 12px;font-size:12px;text-transform:uppercase;cursor:pointer} .mt-tb{display:flex;gap:12px;align-items:flex-start;padding:14px 12px;border-bottom:1px solid #e3e6ec;background:#ecf0f8;cursor:pointer} .mt-tb.da-doc{background:#fff} /* ─────────── màn của app điện thoại nằm TRONG khung (tìm hàng, giỏ, chi tiết, thông báo…) ─────────── */ html.mt main>.man:not(.mt-trang){max-width:980px;margin:0 auto} html.mt main>#man-tim,html.mt main>#man-ket-qua,html.mt main>#man-chi-tiet{max-width:1200px} html.mt main>.man:not(.mt-trang)>h1{font-size:12.5px;font-weight:700;color:var(--mt-chu);text-transform:uppercase;letter-spacing:0;margin:0 0 6px} html.mt .hop{border-radius:2px;border-color:transparent} html.mt .nut{border-radius:2px} html.mt .tab{border-radius:2px} html.mt input[type=text],html.mt input[type=tel],html.mt input[type=password],html.mt textarea{border-radius:2px} /* thanh dính đáy của các màn app (giỏ · xác nhận đơn · chi tiết món · làm nhiều đơn) = thanh tối của web cũ */ html.mt .dinh-day{left:var(--mt-ben);right:0;background:var(--mt-day);color:#fff;border-top:0;padding:9px 16px;min-height:58px} html.mt.mt-thu .dinh-day{left:0} html.mt .dinh-day .nho,html.mt .dinh-day span{color:#e5e5e5} html.mt .dinh-day b{color:var(--mt-cam-sang)} html.mt .dinh-day{justify-content:flex-end} html.mt .dinh-day .nut{flex:0 0 auto!important;min-width:200px;width:auto;background:var(--mt-cam);color:#222;text-transform:uppercase;font-size:13px;font-weight:400;padding:12px 22px} /* giỏ: tổng tiền và hai nút nằm MỘT hàng như thanh đáy web cũ (điện thoại xếp 2 hàng) */ html.mt #man-gio .dinh-day{flex-direction:row!important;align-items:center!important;gap:16px!important} html.mt #man-gio .dinh-day>div:first-child{flex:1;justify-content:flex-start!important;gap:12px!important} html.mt #man-gio .dinh-day>div:first-child b{font-size:18px} html.mt #man-gio .dinh-day>div:last-child{flex:none} html.mt .dinh-day .nut.xam,html.mt .dinh-day .nut.vien{background:transparent;color:#fff;border:1px solid #bbb} html.mt .dinh-day .dem{background:#fff} html.mt .dinh-day .dem button{color:#333} html.mt .dinh-day .dem input{color:#222} /* màn TÌM: vừa mắt, 2 cột dưới */ html.mt #man-tim.hien{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-content:start;max-width:980px} html.mt #man-tim>*{grid-column:1 / -1} html.mt #man-tim>.hop[style*="dashed"]{display:none} html.mt .balo{gap:14px;margin-top:16px} html.mt .loi{padding:24px 10px;font-size:14px;border-radius:2px} html.mt .loi span{font-size:32px;margin-bottom:8px} /* màn KẾT QUẢ: lưới rộng */ html.mt .sp{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} /* màn CHI TIẾT MÓN: ảnh bên trái, chọn mẫu bên phải */ html.mt #man-chi-tiet.hien{display:grid;grid-template-columns:minmax(380px,470px) minmax(0,1fr);column-gap:28px;align-items:start} html.mt #man-chi-tiet>*{grid-column:2;min-width:0} html.mt #man-chi-tiet>.khu-treo{grid-column:1;grid-row:1 / span 40;position:sticky;top:calc(var(--mt-dau) + 14px);background:none;box-shadow:none;margin-top:12px} html.mt #man-chi-tiet .khu-anh{grid-template-columns:minmax(0,1fr) 64px;justify-content:stretch;padding:0} html.mt #man-chi-tiet .khu-anh.mot-anh{grid-template-columns:minmax(0,1fr)} html.mt #man-chi-tiet .khu-anh .cot img,html.mt #man-chi-tiet .khu-anh .cot .o-video{width:60px;height:60px} html.mt #man-chi-tiet .gia-treo{padding:12px 2px 0} /* lớp phủ: hộp giữa màn thay cho tấm trượt từ đáy */ html.mt .phu{align-items:center;justify-content:center;padding:24px} html.mt .tam{border-radius:4px;max-width:560px;max-height:88vh;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.25)} html.mt #phu-tk-form .tam{max-width:700px} html.mt .banh{bottom:76px} html.mt .zalo-noi{bottom:76px;right:18px} html.mt .zalo-noi svg{width:46px;height:46px} html.mt .o-chat{left:calc(var(--mt-ben) + 20px);right:20px;width:auto;transform:none} /* thẻ đăng nhập kiểu web cũ */ html.mt #phu-dn-tk .tam{max-width:440px;padding:30px 34px} html.mt #phu-dn-tk .tieu{text-align:center;font-size:24px;text-transform:uppercase;padding-bottom:18px;border-bottom:1px solid #e5e5e5;margin-bottom:12px} /* khách tự chọn giao diện điện thoại trên máy tính: nút nhỏ quay về (chỉ máy có chuột, màn rộng) */ .ve-mt{display:none} @media (min-width:1024px) and (hover:hover) and (pointer:fine){ html.gd-dt .ve-mt{display:block;position:fixed;left:16px;bottom:16px;z-index:44;background:#fff;border:1px solid #ddd; border-radius:20px;padding:8px 14px;font-size:13px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)} } @media print{#mt-ben,#mt-dau,#mt-day{display:none!important}html.mt main{margin:0;padding:0}}