/* =====================================================================================================
   HCL ONE — BẢN WEB ĐIỀU HÀNH (0.8 · 28/09/2026) — tách rõ với bản điện thoại
   Áp khi body có lớp .hc-web: máy tính ≥ 1024 px, hoặc đường /web, hoặc ?che_do=web (app.js: apDungCheDo()).
   Bản điện thoại KHÔNG bị ảnh hưởng: mọi luật dưới đây bắt đầu bằng body.hc-web (trừ biến :root và vài lớp .web-* chỉ có trong bản web).
   Bố cục: thanh bên trái cố định (--web-ben-rong 240 px · thu gọn 72 px) · thanh trên trắng dính đầu (64 px) · nội dung giữa, tối đa 1440 px.
   Thành phần hc-* tự đổi trong bản web: thẻ / danh sách → lưới nhiều cột · bảng rộng hết, đầu bảng dính · form ≤ 720 px ·
   tấm trượt đáy → hộp thoại giữa màn · thanh tab đáy ẩn · chân nút dính đáy nằm trong vùng nội dung. Chỉ dùng biến màu → đúng cả chế độ tối.
   Màn văn phòng của module (main.hc-may) đã tự dàn trang → chỉ được nới tới 1440 px, không bị ép lưới.
   ===================================================================================================== */
:root{ --web-ben-rong:240px; --web-noi-dung:1440px; --web-dem:32px; --web-tren:72px; }
.web-ben{display:none}
body.hc-web.web-thu-gon{--web-ben-rong:72px}
body.hc-web.web-khoa{--web-ben-rong:0px}
body.hc-web{background:var(--nen)}
body.hc-web #goc{margin-left:var(--web-ben-rong);min-height:100vh;transition:margin-left .18s ease}

/* =============== THANH BÊN (chàm đậm, chữ sáng, mục đang mở: nền vàng nhạt + vạch vàng) */
body.hc-web .web-ben{display:flex;flex-direction:column;position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--web-ben-rong);overflow:hidden;
  background:linear-gradient(180deg,#28316E 0%,#1E2455 55%,var(--cham-dam) 100%);color:#D9DCF0;transition:width .18s ease}
@media (prefers-color-scheme: dark){ body.hc-web .web-ben{background:linear-gradient(180deg,#161B40 0%,#0C0F29 100%);box-shadow:1px 0 0 var(--vien)} }
.web-ben-logo{flex:none;height:var(--web-tren);display:flex;align-items:center;padding:0 20px;text-decoration:none;box-shadow:inset 0 -3px 0 var(--vang)}
.web-ben-logo img{display:block;width:auto}
.web-ben-logo img.to{height:52px}   /* bảng nhận diện: logo ngang ≥ 40 px (thanh bên 48–64 px) — dưới 44 px chữ "HAI CỦ LẠC" không đọc được */
.web-ben-logo img.nho{display:none;height:40px}   /* biểu tượng đầy đủ ≥ 40 px */
.web-ben-than{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.web-muc{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;margin:1px 0;padding:0 10px 0 12px;border-radius:10px;
  color:#C9CDEB;font:600 14px/1.25 var(--noi-dung);text-decoration:none;white-space:nowrap}
.web-muc svg{flex:none;color:#9EA5D4}
.web-muc span{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;padding:7px 0}   /* tên dài xuống dòng, không cắt "…" */
.web-muc:hover{background:rgba(255,255,255,.07);color:#fff} .web-muc:hover svg{color:#fff}
.web-muc:focus-visible{outline:2px solid var(--vang);outline-offset:-2px}
.web-muc.chon{background:rgba(249,189,37,.15);color:#fff} .web-muc.chon svg{color:var(--vang)}
.web-muc.chon::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--vang)}
.web-dem{flex:none;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--vang);color:var(--cham-dam);font:800 11.5px/20px var(--noi-dung);text-align:center}
.web-dem[hidden]{display:none}
.web-nhom{margin-top:14px}
.web-nhom-dau{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:32px;margin:0;padding:4px 10px 4px 12px;border:0;border-radius:8px;background:none;cursor:pointer;
  color:rgba(201,205,235,.72);font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.09em;text-transform:uppercase}
.web-nhom-dau:hover{color:#fff} .web-nhom-dau:focus-visible{outline:2px solid var(--vang);outline-offset:-2px}
.web-nhom-dau svg{transition:transform .15s;opacity:.8}
.web-nhom.dong .web-nhom-dau svg{transform:rotate(-90deg)}
.web-nhom.dong .web-nhom-than{display:none}
.web-ben-chan{flex:none;display:flex;align-items:stretch;border-top:1px solid rgba(255,255,255,.08)}
.web-ben-gon,.web-ben-bl{display:flex;align-items:center;gap:10px;height:48px;margin:0;padding:0 22px;border:0;background:none;color:#9EA5D4;
  font:600 13px var(--noi-dung);cursor:pointer;white-space:nowrap}
.web-ben-gon{flex:1 1 auto;min-width:0}
.web-ben-bl{flex:none;gap:8px;padding:0 18px}
.web-ben-gon:hover,.web-ben-bl:hover{color:#fff} .web-ben-gon:focus-visible,.web-ben-bl:focus-visible{outline:2px solid var(--vang);outline-offset:-2px}
/* nút tròn "Báo lỗi" nổi góc dưới (bản điện thoại) đè lên bảng rộng → bản web mở từ chân thanh bên */
body.hc-web .bl-nut{display:none!important}
/* thu gọn: chỉ biểu tượng (tên mục trong chú thích khi di chuột) */
body.hc-web.web-thu-gon .web-ben-logo{padding:0;justify-content:center}
body.hc-web.web-thu-gon .web-ben-logo img.to{display:none}
body.hc-web.web-thu-gon .web-ben-logo img.nho{display:block}
body.hc-web.web-thu-gon .web-ben-than{padding:10px 10px 20px}
body.hc-web.web-thu-gon .web-muc{justify-content:center;gap:0;padding:0}
body.hc-web.web-thu-gon .web-muc span{display:none}
body.hc-web.web-thu-gon .web-muc.chon::before{left:-10px}
body.hc-web.web-thu-gon .web-dem{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;font-size:10.5px;line-height:18px}
body.hc-web.web-thu-gon .web-nhom{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
body.hc-web.web-thu-gon .web-nhom-dau{display:none}
body.hc-web.web-thu-gon .web-nhom.dong .web-nhom-than{display:block}
body.hc-web.web-thu-gon .web-ben-chan{flex-direction:column-reverse}
body.hc-web.web-thu-gon :is(.web-ben-gon,.web-ben-bl){justify-content:center;padding:0;height:44px}
body.hc-web.web-thu-gon :is(.web-ben-gon,.web-ben-bl) span{display:none}
body.hc-web.web-thu-gon .web-ben-gon svg{transform:rotate(180deg)}

/* =============== THANH TRÊN (trắng, dính đầu; nội dung thẳng hàng với cột nội dung 1440 px) */
body.hc-web #goc>.dau.web-dau{position:sticky;top:0;z-index:20;height:var(--web-tren);display:flex;align-items:center;gap:8px;
  padding:0 max(var(--web-dem), calc((100% - var(--web-noi-dung)) / 2 + var(--web-dem)));
  background:var(--the);color:var(--chu);border-bottom:1px solid var(--vien-2);box-shadow:0 8px 20px -16px rgba(25,30,67,.35)}
body.hc-web .web-dau .nut-dau{flex:none;color:var(--chinh);border-radius:12px}
body.hc-web .web-dau .nut-dau:hover{background:var(--nen-2)}
body.hc-web .web-dau .nut-dau:focus-visible{outline:3px solid var(--chinh-nhat)}
body.hc-web .web-dau>.nut-dau:first-child{margin-left:-10px}
body.hc-web .web-dau .dau-tieu-de{flex:1;min-width:0;padding:0 4px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.web-duong{display:flex;align-items:center;gap:4px;min-width:0;font:600 12px/1.4 var(--noi-dung);color:var(--mo);white-space:nowrap;overflow:hidden}
.web-duong a{color:var(--mo);text-decoration:none} .web-duong a:hover{color:var(--chinh);text-decoration:underline}
.web-duong svg{flex:none;opacity:.7}
.web-tieu-de{display:flex;align-items:baseline;gap:12px;min-width:0;overflow:hidden}
body.hc-web .web-dau h1,body.hc-web .web-dau h1.dai{flex:0 0 auto;max-width:100%;min-width:0;margin:0;padding:0;font:800 20px/1.3 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* dòng phụ nhường chỗ cho tiêu đề: co lại (… ) trước, hẹp quá thì ẩn */
body.hc-web .web-dau .dau-phu{flex:1 1 0;min-width:60px;margin:0;font-size:13px;color:var(--mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-nut-man{flex:none;display:flex;align-items:center;gap:2px}
body.hc-web .web-dau .tb-doc-het{color:var(--chinh)!important}
/* chip đồng bộ trên nền trắng */
body.hc-web .web-dau .gui{color:var(--chu);flex:none}
body.hc-web .web-dau .gui .gv{height:34px;padding:0 12px;background:var(--nen-2);color:var(--chu)}
body.hc-web .web-dau .gui .gv svg{color:var(--xanh)}
body.hc-web .web-dau .gui.cho .gv{background:var(--vang);color:var(--cham-dam)}
body.hc-web .web-dau .gui.loi .gv{background:var(--do-hcl);color:#fff}
body.hc-web .web-dau .gui.mat-song .gv{background:var(--cam-nhat);color:var(--cam-dam);box-shadow:none}
body.hc-web .web-dau .gui.mat-song .gv svg{color:var(--cam)}
body.hc-web .web-dau .web-chuong .so-do{top:3px;right:2px;border-color:var(--the)}
/* tìm nhanh */
.web-tim{position:relative;flex:0 1 340px;min-width:200px}
.web-tim-o{display:flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 10px 0 12px;border-radius:12px;border:1.5px solid transparent;background:var(--nen-2);color:var(--mo);cursor:text}
.web-tim-o:focus-within{background:var(--the);border-color:var(--chinh-2);box-shadow:0 0 0 3px var(--chinh-nhat)}
.web-tim-o input,.web-tim-o input:focus{flex:1;width:auto;min-width:0;min-height:0;height:36px;margin:0;padding:0;border:0;border-radius:0;background:none;outline:0;box-shadow:none;color:var(--chu);font-size:14px}
.web-tim-o input::placeholder{color:var(--mo);opacity:1}
.web-tim-o kbd{flex:none;padding:0 7px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--mo);font:600 11.5px/20px var(--noi-dung)}
.web-tim-o:focus-within kbd{display:none}
.web-tim-kq{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:max(100%,420px);max-height:min(72vh,540px);overflow:auto;padding:6px;
  background:var(--the);border:1px solid var(--vien-2);border-radius:16px;box-shadow:var(--bong-2)}
.web-kq-nhom{padding:10px 10px 4px;font:700 11px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--mo)}
.web-kq{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:10px;color:var(--chu);text-decoration:none}
.web-kq:hover,.web-kq.chon{background:var(--chinh-nhat)}
.web-kq-dau{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--nen-2);color:var(--chinh)}
.web-kq-chu{min-width:0;display:flex;flex-direction:column}
.web-kq-chu b{font:700 14px/1.3 var(--noi-dung);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-kq-chu small{font-size:12.5px;color:var(--mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-kq-cho{padding:12px 10px;font-size:13.5px;color:var(--mo)}
/* tài khoản */
.web-nguoi{position:relative;flex:none}
.web-nguoi-nut{display:flex;align-items:center;gap:10px;height:44px;margin:0;padding:0 8px 0 4px;border:0;border-radius:12px;background:none;color:var(--chu);cursor:pointer;text-align:left}
.web-nguoi-nut:hover{background:var(--nen-2)} .web-nguoi-nut:focus-visible{outline:3px solid var(--chinh-nhat)}
.web-nguoi-nut>svg{color:var(--mo);flex:none}
.web-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cham);color:var(--vang);font:800 15px/1 var(--tieu-de)}
.web-avatar.lon{width:44px;height:44px;font-size:18px}
.web-avatar.rat-lon{width:72px;height:72px;font-size:30px;box-shadow:0 0 0 4px var(--vang-nhat)}
.web-nguoi-ten{display:flex;flex-direction:column;min-width:0;max-width:170px;line-height:1.25}
.web-nguoi-ten b{font:700 13.5px/1.25 var(--noi-dung);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-nguoi-ten small{font-size:12px;color:var(--mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-nguoi-menu{position:absolute;z-index:40;right:0;top:calc(100% + 8px);width:300px;padding:8px;background:var(--the);border:1px solid var(--vien-2);border-radius:16px;box-shadow:var(--bong-2)}
.web-nguoi-menu[hidden]{display:none}
.web-nguoi-dau{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--vien-2)}
.web-nguoi-dau>div{min-width:0;display:flex;flex-direction:column}
.web-nguoi-dau b{font:800 15px/1.3 var(--tieu-de)}
.web-nguoi-dau span{font-size:12.5px;color:var(--mo);overflow-wrap:anywhere}
.web-nguoi-menu [role=menuitem]{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;margin:0;padding:0 10px;border:0;border-radius:10px;background:none;
  color:var(--chu);font:600 14px var(--noi-dung);text-decoration:none;text-align:left;cursor:pointer}
.web-nguoi-menu [role=menuitem]:hover,.web-nguoi-menu [role=menuitem]:focus-visible{background:var(--chinh-nhat);outline:0}
.web-nguoi-menu [role=menuitem] svg{flex:none;color:var(--chinh)}
.web-nguoi-menu [role=menuitem] span{flex:1}
.web-nguoi-menu .thoat,.web-nguoi-menu .thoat svg{color:var(--do)}
.web-nguoi-vach{height:1px;margin:6px 4px;background:var(--vien-2)}
.web-nguoi-so{min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--do-hcl);color:#fff;font:800 11px/20px var(--noi-dung);font-style:normal;text-align:center}
.web-nguoi-so[hidden]{display:none}

/* =============== NỘI DUNG */
body.hc-web #goc>main{max-width:var(--web-noi-dung);margin:0 auto;padding:24px var(--web-dem) 96px}
body.hc-web #goc>main.hc-may{max-width:var(--web-noi-dung);padding-left:var(--web-dem);padding-right:var(--web-dem)}
body.hc-web #goc>main.rong{max-width:none;padding:0}
body.hc-web.co-chan #goc>main{padding-bottom:128px}
body.hc-web .ban-do{height:calc(100vh - var(--web-tren) - 1px)}
body.hc-web .hc-tab-day{display:none!important}
body.hc-web .hc-hero{padding:20px 24px 18px}
body.hc-web .hc-muc{margin-top:24px}
/* ---- lưới tự động cho màn dựng theo khổ điện thoại (main.web-luoi; màn .hc-may của module đã tự dàn trang thì không đụng)
   · con trực tiếp của main (và của khối bọc trơn <div id="ds"> không lớp) xếp trên lưới; mặc định chiếm cả hàng
   · thẻ .hc-the đứng liền nhau → nhiều cột (≥ 360 px mỗi cột); thẻ đứng một mình → cả hàng */
body.hc-web #goc>main.web-luoi:not(.hc-may){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));column-gap:20px;align-content:start;align-items:start}
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class]){display:contents}
body.hc-web #goc>main.web-luoi:not(.hc-may)>*,
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>*{grid-column:1/-1;min-width:0}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-the,
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>.hc-the{grid-column:auto;align-self:stretch}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-the:not(.hc-the+.hc-the):not(:has(+.hc-the)),
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>.hc-the:not(.hc-the+.hc-the):not(:has(+.hc-the)){grid-column:1/-1;align-self:start}
/* danh sách dòng ≥ 3 mục → lưới thẻ nhỏ nhiều cột */
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-ds:has(>:nth-child(3)),
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>.hc-ds:has(>:nth-child(3)){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px;
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-ds:has(>:nth-child(3))>*,
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>.hc-ds:has(>:nth-child(3))>*{border:1px solid var(--vien-2);border-radius:14px;background:var(--the);box-shadow:var(--bong-1);min-height:64px}
body.hc-web #goc>main.web-luoi a.hc-dong:hover,body.hc-web #goc>main.web-luoi button.hc-dong:hover{background:var(--nen)}
body.hc-web #goc>main.web-luoi:not(.hc-may) .hc-ds:has(>:nth-child(3))>a.hc-dong:hover{background:var(--the);box-shadow:var(--bong-2);border-color:var(--cham-nhat)}
/* form: ô nhập, thẻ form ≤ 720 px, dạt trái */
body.hc-web #goc>main.web-luoi:not(.hc-may)>:is(.hc-truong,form,.hc-the:has(.hc-truong)),
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>:is(.hc-truong,form,.hc-the:has(.hc-truong)){width:100%;max-width:720px;justify-self:start}
/* ô tìm, bộ lọc, tab phân đoạn: gọn, dạt trái */
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-tim,body.hc-web #goc .kh-loc{max-width:720px;width:100%;justify-self:start}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-tab{justify-self:start;max-width:100%}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-tab>:is(button,a){flex:0 0 auto;padding:0 18px}
/* nút rộng hết khối (kiểu điện thoại) → nút vừa chữ */
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-nut.khoi,
body.hc-web #goc>main.web-luoi:not(.hc-may)>div:not([class])>.hc-nut.khoi{display:inline-flex;width:auto;min-width:280px;justify-self:start}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-nhom-nut{justify-self:start;flex-wrap:wrap}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-nhom-nut>*{flex:0 0 auto;min-width:200px}
/* danh sách sản phẩm (đặt hàng, ghi tồn, thiết bị): luôn là lưới thẻ — mọi nhóm hàng cùng một kiểu */
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-ds.hc-sp-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-ds.hc-sp-ds>.hc-sp{border:1px solid var(--vien-2);border-radius:14px;background:var(--the);box-shadow:var(--bong-1)}
body.hc-web #goc>main.web-luoi:not(.hc-may)>.hc-ds.hc-sp-ds>.hc-sp.co-so{background:var(--vang-nhat)}
body.hc-web .web-ho-so-ds{max-width:720px;justify-self:start;width:100%}
/* 8 ô lối tắt (trang chủ bán hàng) → 4 cột */
body.hc-web .luoi-o{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.hc-web .luoi-o .o{transition:transform .15s,box-shadow .15s} body.hc-web .luoi-o .o:hover{transform:translateY(-2px);box-shadow:var(--bong-2)}
body.hc-web .chan-tc{margin-top:28px}
/* thẻ bấm được: nổi nhẹ khi di chuột */
body.hc-web a.hc-the.bam:hover{box-shadow:var(--bong-2)}
/* bảng: rộng hết, chữ thoáng; bảng dài cuộn trong khung, đầu bảng dính */
/* :where → cùng độ ưu tiên với luật bảng của module (nạp sau) — bảng dày số liệu của module (kho…) giữ khoảng cách riêng */
:where(body.hc-web) .hc-bang{font-size:14px}
:where(body.hc-web) .hc-bang th,:where(body.hc-web) .hc-bang td{padding:11px 14px}
body.hc-web .hc-bang th{z-index:1}
body.hc-web .hc-bang-cuon:has(tbody>tr:nth-child(15)){max-height:calc(100vh - var(--web-tren) - 120px);overflow:auto}
/* bảng rộng hơn khung (app.js xetBangRong): mờ mép phải = còn cột bên phải; cuộn tới cuối thì hết mờ */
body.hc-web .hc-bang-cuon.web-tran:not(.web-het){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),rgba(0,0,0,.14));mask-image:linear-gradient(90deg,#000 calc(100% - 72px),rgba(0,0,0,.14))}
/* bảng xếp hạng đội (Báo cáo điều hành › Đội ngũ): dòng phụ dưới tên xuống dòng → bảng vừa khung 1366 px */
body.hc-web main.bc .hc-bang td.ten-nv .p{white-space:normal;min-width:190px}
/* tấm trượt đáy → hộp thoại giữa màn */
body.hc-web .hc-man-toi{align-items:center;padding:24px}
body.hc-web .hc-sheet{max-width:600px;max-height:min(88vh,880px);border-radius:20px;padding:22px 24px 20px;animation:web-hop .16s ease-out}
body.hc-web .hc-sheet::before{display:none}
body.hc-web .hc-sheet h3{font-size:20px}
body.hc-web .hc-sheet .hc-nhom-nut:last-child{justify-content:flex-end;margin-bottom:0}
body.hc-web .hc-sheet .hc-nhom-nut:last-child>.hc-nut{flex:0 0 auto;min-width:130px}
@keyframes web-hop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* chân nút dính đáy: nằm trong vùng nội dung, nút chính bên phải */
body.hc-web #goc>.chan{left:var(--web-ben-rong);right:0;width:auto;transform:none;z-index:15;padding:12px 0;border-radius:0;border-left:0;border-right:0}
body.hc-web #goc>.chan>.trong{max-width:var(--web-noi-dung);margin:0 auto;padding:0 var(--web-dem);display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 24px}
body.hc-web #goc>.chan>.trong>*{margin-top:0;margin-bottom:0}
body.hc-web #goc>.chan>.trong>.hc-nut.khoi{display:inline-flex;width:auto;min-width:280px;flex:0 0 auto}
body.hc-web #goc>.chan .dh-gio{flex:1 1 auto;justify-content:flex-start;gap:20px;margin:0}
body.hc-web #goc>.chan .dh-chan-loi{flex-basis:100%;order:3;text-align:right}
body.hc-web #goc>.chan .dm-nhac{flex:1 1 auto;margin:0}
body.hc-web #goc>.chan .hc-thanh-nut{flex:0 1 620px}
body.hc-web #goc>.chan .hc-nhom-nut{margin:0;flex:0 0 auto}
body.hc-web #goc>.chan .hc-nhom-nut>.hc-nut{flex:0 0 auto;min-width:200px}
body.hc-web #goc>.chan .hc-nhom-nut>.nut-vuong{min-width:56px}
/* thông báo nổi: giữa vùng nội dung */
body.hc-web .thong-bao{left:calc(var(--web-ben-rong) + 24px);right:24px;bottom:28px;max-width:480px;margin:0 auto}
body.hc-web.co-chan .thong-bao{bottom:100px}
/* nút báo lỗi nổi (module báo lỗi): đứng trong vùng nội dung, không đè thanh bên */

/* =============== TRANG CHỦ BẢN WEB: dải "Hôm nay" (giám đốc) · Tổng quan đội (SS / ASM) */
.web-tq{grid-column:1/-1;margin:0 0 8px}
.web-tq-dau{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 2px 14px}
.web-tq-dau h2{margin:0;font:800 24px/1.2 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);text-transform:none}
.web-tq-dau .hc-phu{margin:0;font-size:14px}
.web-o-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0 0 16px}
.web-o{position:relative;display:flex;flex-direction:column;gap:2px;min-height:140px;padding:16px 18px;border:1px solid var(--vien-2);border-radius:18px;
  background:var(--the);box-shadow:var(--bong-1);color:var(--chu);text-decoration:none;transition:box-shadow .15s,transform .15s,border-color .15s}
a.web-o:hover{box-shadow:var(--bong-2);transform:translateY(-1px);border-color:var(--cham-nhat)}
a.web-o:focus-visible{outline:3px solid var(--chinh-nhat)}
.web-o-dau{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--mo)}
.web-o-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--chinh-nhat);color:var(--chinh)}
.web-o.cam .web-o-icon{background:var(--cam-nhat);color:var(--cam-dam)} .web-o.do .web-o-icon{background:var(--do-nhat);color:var(--do)} .web-o.xanh .web-o-icon{background:var(--xanh-nhat);color:var(--xanh)}
.web-o>b{display:block;font:800 32px/1.1 var(--tieu-de);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.web-o>b.dai{font-size:28px} .web-o>b.rat-dai{font-size:24px}
.web-o>b small{font-size:.55em;font-weight:700;opacity:.6;margin-left:2px}
.web-o.cam>b{color:var(--cam-dam)} .web-o.do>b{color:var(--do)}
.web-o-nhan{font:700 14px/1.3 var(--noi-dung);color:var(--chu-2)}
.web-o-phu{font-size:12.5px;line-height:1.35;color:var(--mo)}
.web-o.hc-tai{border:0;box-shadow:none}
.web-khoi-mod:empty{display:none}
.web-khoi-mod>*,.web-cot-xep>*{min-width:0}
.web-khoi-mod>:is(.hc-the,section,a),.web-cot-xep>:is(.hc-the,section,a){display:block;width:100%}
.web-cot>.web-khoi-mod:first-child{margin-top:8px}
/* khối của module cao thấp khác nhau (trang chủ web, trang chủ bán hàng) → app xếp vào 2–3 cột, khối mới vào cột thấp nhất (xepKhoiWeb) */
body.hc-web #goc>main.web-luoi>#tc-mod{display:block}
body.hc-web .web-khoi-mod.xep,body.hc-web #goc>main.web-luoi>#tc-mod.xep{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:0 16px;align-items:start}
.web-cot-xep{min-width:0}
.web-muc-lon{display:flex;align-items:center;gap:10px;margin:28px 2px 14px;font:800 20px/1.2 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);text-transform:none}
.web-muc-lon svg{color:var(--chinh)}
.web-2cot{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:0 24px;align-items:start}
.web-cot{min-width:0}
.web-cot>.hc-muc:first-child{margin-top:8px}
.web-trong{display:flex;align-items:center;gap:8px;color:var(--mo)}
.web-trong svg{color:var(--xanh);flex:none}
.web-bang-doi td .hc-phu{margin-top:2px;font-size:12.5px}
.web-bang-doi td:first-child{white-space:nowrap}
body.hc-web .web-bang-doi th,body.hc-web .web-bang-doi td{padding:10px}
body.hc-web .web-bang-doi th:first-child,body.hc-web .web-bang-doi td:first-child{padding-left:14px}
.web-bang-doi td b{font-weight:700}
/* màn điểm bán (bản web): hai cột */
.web-diem{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:0 24px;align-items:start}
.web-diem-chinh,.web-diem-phu{min-width:0}
.web-diem-phu>.hc-muc:first-child{margin-top:0}
body.hc-web .web-diem .dm-dau{margin:0 0 12px;border:1px solid var(--vien-2);border-radius:18px;overflow:hidden;background:var(--the);box-shadow:var(--bong-1)}
body.hc-web .web-diem .hc-bia{max-height:340px}
body.hc-web .web-diem .dm-chip{padding:12px 16px 14px}
/* hồ sơ của tôi */
.web-ho-so{max-width:720px}
.web-ho-so-dau{display:flex;align-items:center;gap:16px;margin:0 0 12px}
.web-ho-so-dau h2{margin:0;font:800 22px/1.25 var(--tieu-de);color:var(--chu);text-transform:none;letter-spacing:-.01em}
.web-ho-so-dau .hc-phu{margin:0 0 6px}
body.hc-web .web-ho-so{justify-self:start;width:100%}
/* "Hôm nay làm gì?" trên bản web: thẻ nhiều cột */
body.hc-web .hn-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:0 16px}

/* =============== khổ hẹp hơn trong bản web (1024 – 1279 px) và bản web ép trên màn nhỏ (/web trên điện thoại) */
@media (max-width:1439px){ :root{--web-dem:24px} body.hc-web .web-nguoi-ten{display:none} body.hc-web .web-tim{flex-basis:300px} }
@media (max-width:1279px){
  body.hc-web .web-tim{flex-basis:260px}
  .web-2cot,.web-diem{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){ body.hc-web .web-tim-o kbd{display:none} body.hc-web .luoi-o{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:899px){
  :root{--web-dem:14px}
  body.hc-web .web-tim{display:none}
  body.hc-web .web-dau .dau-phu,body.hc-web .web-nguoi-nut>svg{display:none}
  body.hc-web #goc>.dau.web-dau{gap:2px}
  body.hc-web .hc-man-toi{padding:12px}
}
@media print{ body.hc-web .web-ben,body.hc-web .web-tim,body.hc-web .web-nguoi,body.hc-web .web-chuong{display:none!important} body.hc-web #goc{margin-left:0} }