/* =====================================================================
   CRM Đồng hồ & Kính mắt — bảng màu lấy từ mặt số đồng hồ:
   xanh mặt số, kim đồng thau, vỏ thép chải xước, mặt lume ngà.
   ===================================================================== */

:root{
  --muc:      #12161C;   /* mực in  */
  --muc-2:    #56606E;   /* chữ phụ */
  --muc-3:    #8B95A3;   /* chữ mờ  */
  --nen:      #EDEFF1;   /* nền thép chải */
  --the:      #FFFFFF;   /* mặt thẻ */
  --vien:     #DCE0E5;
  --vien-2:   #EBEEF1;
  --chinh:    #16324F;   /* xanh mặt số */
  --chinh-2:  #22456B;
  --dong:     #A8763E;   /* kim đồng thau */
  --dong-mo:  #F4EADD;
  --xanh:     #2E6F4E;
  --xanh-mo:  #E4F0EA;
  --do:       #B23A32;
  --do-mo:    #F8E7E5;
  --vang:     #9A6B10;
  --vang-mo:  #FBF0D8;
  --bong:     0 1px 2px rgba(18,22,28,.06), 0 8px 24px -12px rgba(18,22,28,.18);
  --r:        10px;
  /* Thanh menu ngang, kiểu phần mềm bán hàng quen thuộc */
  --thanh:    #0F62C0;   /* xanh thanh menu */
  --thanh-2:  #0B4E9B;   /* mục đang mở */
  --thanh-3:  #0A4587;   /* viền dưới */
  --cam:      #F0932B;   /* nút bán hàng */
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--muc);
  background:var(--nen);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0 0 .5rem; font-weight:650; letter-spacing:-.011em; }
h1{ font-size:1.5rem; } h2{ font-size:1.25rem; } h3{ font-size:1.05rem; } h4{ font-size:.95rem; }
a{ color:var(--chinh); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 .75rem; }

/* Số liệu tiền tệ — chữ có chân, chữ số đều cột, gạch chân đồng thau */
.so-tien{
  font-family:'Newsreader', Georgia, serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  letter-spacing:-.01em;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- Khung trang ----------
   Hai hàng trên cùng: hàng trắng mang thương hiệu và tài khoản,
   hàng xanh mang menu chính. Nội dung chạy full bề ngang bên dưới. */
.shell{ min-height:100vh; display:flex; flex-direction:column; }

/* Hàng 1 — trắng */
.tb-1{
  background:var(--the); border-bottom:1px solid var(--vien);
  height:56px; padding:0 20px; display:flex; align-items:center; gap:14px;
}
.tb-1 .day{ flex:1; }
.tb-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.tb-logo:hover{ text-decoration:none; }
.tb-dau{
  width:30px; height:30px; border-radius:8px; background:var(--thanh);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.tb-ten{
  font-family:'Newsreader', Georgia, serif; font-size:1.12rem;
  color:var(--muc); line-height:1.1;
}
.tb-phai{ display:flex; align-items:center; gap:12px; }
.tb-nguoi{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--muc); }
.tb-nguoi:hover{ text-decoration:none; }
.tb-avt{
  width:30px; height:30px; border-radius:50%; background:var(--dong-mo);
  color:var(--dong); font-weight:700; display:flex; align-items:center;
  justify-content:center; font-size:.82rem;
}
.tb-nd{ display:flex; flex-direction:column; line-height:1.15; }
.tb-nd strong{ font-size:.82rem; font-weight:600; }
.tb-nd small{ font-size:.7rem; color:var(--muc-3); }
.tb-thoat{
  font-size:.8rem; color:var(--muc-2); border:1px solid var(--vien);
  border-radius:6px; padding:5px 11px;
}
.tb-thoat:hover{ background:var(--nen); text-decoration:none; }

/* Hàng 2 — xanh */
.tb-2{
  background:var(--thanh); border-bottom:3px solid var(--thanh-3);
  padding:0 14px 0 20px; display:flex; align-items:stretch; gap:6px;
  position:sticky; top:0; z-index:40; min-height:46px;
}
.tn-ds{ display:flex; align-items:stretch; flex:1; flex-wrap:wrap; }
.tn-ham{
  display:none; background:none; border:0; color:#fff;
  font-size:1.2rem; padding:0 10px; cursor:pointer;
}

.tn-muc{ position:relative; display:flex; align-items:stretch; }
.tn-nut{
  display:flex; align-items:center; gap:4px; padding:0 15px;
  color:rgba(255,255,255,.92); font-size:.875rem; font-weight:500;
  white-space:nowrap; text-decoration:none;
}
.tn-nut:hover{ background:var(--thanh-2); color:#fff; text-decoration:none; }
/* Mục đang mở nổi hẳn lên như một thẻ đang chọn */
.tn-muc.tn-dang-mo > .tn-nut{ background:var(--thanh-3); color:#fff; font-weight:600; }
.tn-mui{ font-size:.62rem; opacity:.75; }

.tn-xo{
  display:none; position:absolute; top:100%; left:0; min-width:206px;
  background:var(--the); border:1px solid var(--vien); border-top:0;
  border-radius:0 0 8px 8px; box-shadow:0 10px 28px -10px rgba(18,22,28,.35);
  padding:5px 0; z-index:50;
}
.tn-muc:hover .tn-xo, .tn-muc:focus-within .tn-xo{ display:block; }
.tn-xo a{
  display:block; padding:7px 15px; color:var(--muc);
  font-size:.85rem; white-space:nowrap;
}
.tn-xo a:hover{ background:var(--nen); text-decoration:none; }
.tn-xo a.active{ color:var(--thanh); font-weight:600; background:var(--nen); }

.tn-ban{
  align-self:center; background:#fff; color:var(--thanh);
  font-weight:600; font-size:.85rem; border-radius:6px;
  padding:7px 16px; margin-left:8px; white-space:nowrap;
}
.tn-ban:hover{ background:var(--dong-mo); color:var(--dong); text-decoration:none; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--nen); border:1px solid var(--vien);
  border-radius:999px; padding:4px 12px; font-size:.8rem; color:var(--muc-2);
}
.noi-dung{ padding:18px 20px; width:100%; }

@media (max-width:900px){
  .tn-ham{ display:block; }
  .tn-ds{ display:none; position:absolute; top:100%; left:0; right:0;
          flex-direction:column; background:var(--thanh-2); padding:6px 0; }
  .tn-ds.mo{ display:flex; }
  .tn-nut{ padding:10px 20px; }
  .tn-xo{ position:static; border:0; border-radius:0; box-shadow:none;
          background:rgba(0,0,0,.14); padding:0; }
  .tn-muc .tn-xo{ display:block; }
  .tn-xo a{ color:rgba(255,255,255,.88); padding:7px 34px; }
  .tn-xo a:hover, .tn-xo a.active{ background:rgba(0,0,0,.18); color:#fff; }
  .tb-nd{ display:none; }
}

/* ---------- Thẻ ---------- */
.card{
  background:var(--the); border:1px solid var(--vien);
  border-radius:var(--r); box-shadow:var(--bong); margin-bottom:18px;
}
.card-head{
  padding:14px 18px; border-bottom:1px solid var(--vien-2);
  display:flex; align-items:center; gap:12px;
}
.card-head h3{ margin:0; }
.card-head .day{ flex:1; }
.card-body{ padding:18px; }
.card-body.chat{ padding:0; }

/* ---------- Ô số liệu ---------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.stat{ background:var(--the); border:1px solid var(--vien); border-radius:var(--r); padding:16px 18px; }
.stat-nhan{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muc-3); }
.stat-so{
  font-family:'Newsreader', Georgia, serif; font-size:1.85rem; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:6px; color:var(--muc);
}
.stat-chan{
  margin-top:10px; padding-top:8px; border-top:1px solid var(--dong-mo);
  font-size:.78rem; color:var(--muc-2);
}
.stat-chan b{ color:var(--dong); }

/* ---------- Bảng ---------- */
.bang-cuon{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;   /* cuộn mượt trên iOS */
}
/* Bảng trong khung cuộn không được co lại nhỏ hơn nội dung, không thì
   trình duyệt bóp cột thay vì cho cuộn */
.bang-cuon > table.bang{ min-width:100%; }
table.bang{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.bang th{
  text-align:left; font-weight:600; font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muc-3);
  padding:10px 14px; border-bottom:1px solid var(--vien); white-space:nowrap;
  background:#FAFBFC;
}
table.bang td{ padding:10px 14px; border-bottom:1px solid var(--vien-2); vertical-align:middle; }
table.bang tbody tr:hover{ background:#FAFBFC; }
table.bang tbody tr:last-child td{ border-bottom:0; }
table.bang .phai{ text-align:right; }
table.bang .giua{ text-align:center; }
table.bang tfoot td{
  padding:11px 14px; font-weight:650; border-top:2px solid var(--muc);
  background:#FAFBFC;
}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--vien); background:var(--the); color:var(--muc);
  padding:7px 14px; border-radius:8px; font-size:.86rem; font-weight:500;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{ background:var(--nen); text-decoration:none; }
.btn-primary{ background:var(--chinh); border-color:var(--chinh); color:#fff; }
.btn-primary:hover{ background:var(--chinh-2); border-color:var(--chinh-2); }
.btn-dong{ background:var(--dong); border-color:var(--dong); color:#fff; }
.btn-dong:hover{ background:#916431; border-color:#916431; }
.btn-nguy{ background:var(--do); border-color:var(--do); color:#fff; }
.btn-nguy:hover{ background:#9A312A; }
.btn-nho{ padding:4px 10px; font-size:.8rem; border-radius:6px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Nhãn trạng thái ---------- */
.badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.74rem; font-weight:600; line-height:1.6; white-space:nowrap;
}
.badge-secondary{ background:var(--nen);    color:var(--muc-2); }
.badge-success  { background:var(--xanh-mo);color:var(--xanh); }
.badge-warning  { background:var(--vang-mo);color:var(--vang); }
.badge-danger   { background:var(--do-mo);  color:var(--do); }
.badge-info     { background:#E5EDF6;       color:var(--chinh); }
.badge-dark     { background:#E2E5E9;       color:var(--muc); }
.badge-dong     { background:var(--dong-mo);color:var(--dong); }

/* ---------- Biểu mẫu ---------- */
.hang{ display:flex; gap:14px; flex-wrap:wrap; }
.o{ margin-bottom:14px; flex:1; min-width:180px; }
.o label{ display:block; font-size:.78rem; font-weight:600; color:var(--muc-2); margin-bottom:5px; }
.o .goi-y{ font-size:.75rem; color:var(--muc-3); margin-top:4px; }
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=email],input[type=search],select,textarea{
  width:100%; padding:8px 11px; font-size:.88rem; font-family:inherit; color:var(--muc);
  background:var(--the); border:1px solid var(--vien); border-radius:8px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--chinh); box-shadow:0 0 0 3px rgba(22,50,79,.12);
}
input[readonly]{ background:var(--nen); color:var(--muc-2); }
textarea{ min-height:76px; resize:vertical; }
.tien-input{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Thông báo ---------- */
.alert{ padding:11px 15px; border-radius:8px; margin-bottom:16px; font-size:.87rem; border:1px solid; }
.alert-success{ background:var(--xanh-mo); border-color:#C3DFD0; color:var(--xanh); }
.alert-danger { background:var(--do-mo);   border-color:#EFC9C5; color:var(--do); }
.alert-warning{ background:var(--vang-mo); border-color:#E8D5A6; color:var(--vang); }
.alert-info   { background:#E5EDF6;        border-color:#C7D8EA; color:var(--chinh); }

/* ---------- Vặt ---------- */
.text-muted{ color:var(--muc-2); }
.text-mo{ color:var(--muc-3); }
.nho{ font-size:.8rem; }
.phai{ text-align:right; }
.giua{ text-align:center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.day{ flex:1; }
.flex{ display:flex; align-items:center; gap:10px; }
.flex-cuoi{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.empty-mark{
  font-family:'Newsreader', Georgia, serif; font-size:3rem; color:var(--dong); line-height:1;
}
.trong{ padding:44px 20px; text-align:center; color:var(--muc-2); }

/* ---------- Trang đăng nhập ---------- */
.dang-nhap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 520px at 50% -12%, #22456B 0%, transparent 62%),
    var(--chinh);
  padding:24px;
}
.dn-hop{ width:100%; max-width:390px; }
.dn-the{ background:var(--the); border-radius:14px; padding:30px 28px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); }
.dn-vanh{
  display:flex; justify-content:center; gap:5px; margin-bottom:20px;
}
.dn-vanh i{ width:2px; height:11px; background:var(--dong); opacity:.35; display:block; }
.dn-vanh i:nth-child(3){ height:17px; opacity:1; }
.dn-ten{ font-family:'Newsreader', Georgia, serif; font-size:1.35rem; text-align:center; margin-bottom:3px; }
.dn-phu{ text-align:center; color:var(--muc-3); font-size:.8rem; margin-bottom:22px; }

/* ---------- In phiếu ---------- */
@media print{
  .tb-1,.tb-2,.khong-in{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:0; }
  .noi-dung{ padding:0; }
  .cot-2{ display:block; }
}

@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .hn-o{ flex:1 1 50%; border-right:0; padding:8px 12px 8px 0; }
  .noi-dung{ padding:14px 12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}
:focus-visible{ outline:2px solid var(--dong); outline-offset:2px; }

/* ---------- Dải kết quả hôm nay ----------
   Bốn ô số nằm ngang trong một thẻ, ngăn nhau bằng vạch mảnh — kiểu
   quen thuộc của phần mềm bán hàng, liếc một cái là thấy hết. */
.hn{ display:flex; flex-wrap:wrap; }
.hn-o{
  flex:1; min-width:180px; padding:4px 22px 4px 0;
  display:flex; align-items:flex-start; gap:12px;
  border-right:1px solid var(--vien-2);
}
.hn-o:last-child{ border-right:0; }
.hn-ico{
  width:38px; height:38px; border-radius:10px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:var(--nen); color:var(--muc-2);
}
.hn-ico.xanh{ background:var(--xanh-mo); color:var(--xanh); }
.hn-ico.do{ background:var(--do-mo); color:var(--do); }
.hn-ico.dong{ background:var(--dong-mo); color:var(--dong); }
.hn-nhan{ font-size:.78rem; color:var(--muc-2); }
.hn-so{
  font-family:'Newsreader', Georgia, serif; font-size:1.55rem; line-height:1.2;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.hn-phu{ font-size:.74rem; color:var(--muc-3); margin-top:1px; }
.hn-len{ color:var(--xanh); } .hn-xuong{ color:var(--do); }

/* ---------- Bố cục hai cột: nội dung trái, thông báo phải ---------- */
.cot-2{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
@media (max-width:1150px){ .cot-2{ grid-template-columns:1fr; } }

.tb-mini{
  display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid var(--vien-2);
  font-size:.83rem; line-height:1.45;
}
.tb-mini:last-child{ border-bottom:0; }
.tb-mini .i{
  width:30px; height:30px; flex:0 0 30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  background:var(--nen); color:var(--muc-2);
}
.tb-mini .i.vang{ background:var(--vang-mo); color:var(--vang); }
.tb-mini .i.xanh{ background:var(--xanh-mo); color:var(--xanh); }
.tb-mini .i.do{ background:var(--do-mo); color:var(--do); }
.tb-mini .gio{ font-size:.72rem; color:var(--muc-3); }

/* ---------- Biểu đồ cột chồng thuần CSS ----------
   Không nạp thư viện vẽ đồ thị: vài chục cột thì mấy cái div là đủ,
   mà trang nhẹ, chạy được cả trên máy cũ ngoài cửa hàng. */
.bd{ display:flex; align-items:flex-end; gap:6px; height:250px; padding:10px 0 0; }
.bd-cot{ flex:1; display:flex; flex-direction:column; justify-content:flex-end;
         height:100%; min-width:14px; }
.bd-xep{ display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0;
         overflow:hidden; transition:opacity .12s; }
.bd-cot:hover .bd-xep{ opacity:.82; }
.bd-phan{ width:100%; }
.bd-nhan{ text-align:center; font-size:.68rem; color:var(--muc-3); padding-top:6px;
          font-variant-numeric:tabular-nums; }
.bd-luoi{ position:relative; }
.bd-vach{ position:absolute; left:0; right:0; border-top:1px dashed var(--vien);
          font-size:.66rem; color:var(--muc-3); padding-left:2px; }
.bd-chu{ display:flex; flex-wrap:wrap; gap:4px 16px; padding-top:14px;
         border-top:1px solid var(--vien-2); margin-top:12px; font-size:.76rem; }
.bd-chu span{ display:inline-flex; align-items:center; gap:6px; color:var(--muc-2); }
.bd-cham{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- Dải việc chưa xong ----------
   Nằm trên đầu MỌI trang, nên hiệu ứng phải nhẹ tay: thứ xem vài trăm lần
   mỗi ngày mà nhảy múa thì hai hôm là phát bực, rồi người ta thôi không nhìn
   nữa — đúng cái điều dải này sinh ra để tránh.

   Ba mức chuyển động, mạnh dần theo mức độ đáng chú ý:
     1. Vào trang  — các ô trượt lên lần lượt, mỗi ô trễ hơn ô trước chút.
     2. Số đổi     — ô sáng lên một nhịp rồi tắt.
     3. Việc mới   — ô nở ra từ bên trái, kèm một nhịp sáng.
   Ô đỏ có thêm quầng thở rất chậm, chỉ đỏ mới có. */
.vcl{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
  margin-bottom:14px; scrollbar-width:thin;
}
.vcl-rong{ padding:0; margin:0; }
.vcl::-webkit-scrollbar{ height:6px; }
.vcl::-webkit-scrollbar-thumb{ background:var(--vien); border-radius:3px; }

.vcl-o{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  background:var(--the); border:1px solid var(--vien);
  border-left:3px solid var(--do); border-radius:8px;
  padding:9px 15px 9px 12px; text-decoration:none; color:var(--muc);
  font-size:.85rem; white-space:nowrap;
  transition:box-shadow .15s, transform .15s, border-color .15s;
  animation:vcl-vao .34s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:var(--tre, 0ms);
}
.vcl-o:hover{ text-decoration:none; box-shadow:0 6px 18px -8px rgba(18,22,28,.3);
              transform:translateY(-1px); }
.vcl-o.vang{ border-left-color:var(--vang); }
.vcl-o.xanh{ border-left-color:var(--xanh); }

.vcl-so{
  font-family:'Newsreader', Georgia, serif; font-size:1.3rem; line-height:1;
  color:var(--do); font-variant-numeric:tabular-nums;
}
.vcl-o.vang .vcl-so{ color:var(--vang); }
.vcl-o.xanh .vcl-so{ color:var(--xanh); }

@keyframes vcl-vao{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:none; }
}

/* Việc vừa mới xuất hiện: nở ra từ bề rộng 0 để các ô bên cạnh dịch
   sang mượt, thay vì giật một cái */
@keyframes vcl-moi{
  from{ opacity:0; max-width:0; padding-left:0; padding-right:0;
        margin-right:-10px; transform:scale(.9); }
  to  { opacity:1; max-width:460px; transform:none; }
}
.vcl-o.vcl-them{ animation:vcl-moi .42s cubic-bezier(.2,.8,.3,1) both; }

/* Việc vừa xong: xẹp lại rồi biến mất */
@keyframes vcl-bot{
  from{ opacity:1; max-width:460px; }
  to  { opacity:0; max-width:0; padding-left:0; padding-right:0;
        margin-right:-10px; transform:scale(.9); }
}
.vcl-o.vcl-bot{ animation:vcl-bot .3s ease-in both; pointer-events:none; }

/* Con số vừa đổi */
@keyframes vcl-sang{
  0%  { background:var(--the); }
  35% { background:color-mix(in srgb, var(--do) 13%, var(--the)); }
  100%{ background:var(--the); }
}
.vcl-o.vcl-doi{ animation:vcl-sang 1.1s ease-out; }
@keyframes vcl-nay{
  0%{ transform:none } 30%{ transform:scale(1.22) } 100%{ transform:none }
}
.vcl-o.vcl-doi .vcl-so{ display:inline-block; animation:vcl-nay .45s ease-out; }

/* Quầng thở, chỉ ô đỏ. 4 giây một nhịp — đủ để mắt bắt được khi lướt qua,
   chậm đến mức không cướp sự chú ý lúc đang đọc thứ khác. */
@keyframes vcl-tho{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,60,60,0) }
  50%    { box-shadow:0 0 0 3px rgba(200,60,60,.12) }
}
.vcl-o:not(.vang):not(.xanh){ animation:vcl-vao .34s cubic-bezier(.2,.8,.3,1) both,
                                        vcl-tho 4s ease-in-out 1.2s infinite; }

/* Máy yếu hoặc người dùng đã tắt hiệu ứng trong hệ điều hành thì bỏ hết.
   Windows 7 cũ ở cửa hàng cũng đỡ được một khoản vẽ lại màn hình. */
@media (prefers-reduced-motion: reduce){
  .vcl-o, .vcl-o.vcl-them, .vcl-o.vcl-bot, .vcl-o.vcl-doi,
  .vcl-o.vcl-doi .vcl-so, .vcl-o:not(.vang):not(.xanh){ animation:none !important; }
}

.vcl-xong{
  display:flex; align-items:center; gap:8px; color:var(--muc-3);
  font-size:.85rem; padding:9px 2px; margin-bottom:14px;
}

/* =====================================================================
 *  MÀN HÌNH ĐIỆN THOẠI
 *
 *  Trước đây chỉ có mốc 900px (gập menu) và 1150px (gộp hai cột). Dưới
 *  600px vẫn còn nhiều chỗ tràn: ô nhập đặt bề rộng cứng bằng pixel,
 *  đầu thẻ không xuống dòng, nút quá nhỏ để chạm.
 * ===================================================================== */
@media (max-width:600px){

  /* Ô nhập đặt cứng flex:0 0 150px… trong HTML không co lại được.
     Ở đây ép mọi ô chiếm trọn một dòng, dễ nhập hơn hẳn trên điện thoại. */
  .hang{ gap:0; }
  .hang > .o{ flex:1 1 100% !important; min-width:0 !important; }

  /* Cột phụ 320px cạnh nội dung chính (máy chấm công, chiến dịch Zalo,
     cấu hình Zalo) — trên điện thoại cho xuống dòng chiếm trọn bề ngang */
  .hang > div[style*="flex:0 0 320px"],
  .hang > div[style*="flex:0 0 340px"],
  [style*="flex:0 0 320px"], [style*="flex:0 0 340px"]{
    flex:1 1 100% !important; max-width:100% !important;
  }

  /* Đầu thẻ: tên thẻ một dòng, nút xuống dòng dưới thay vì bị bóp */
  .card-head{ flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .card-head h3{ flex:1 1 100%; }
  .card-head .day{ display:none; }

  .card-body{ padding:14px; }
  .noi-dung{ padding:12px 10px; }

  /* Bốn ô kết quả hôm nay: hai hàng hai cột thay vì một hàng bốn cột */
  .hn-o{ flex:1 1 100%; padding:10px 0; border-right:0;
         border-bottom:1px solid var(--vien-2); }
  .hn-o:last-child{ border-bottom:0; }

  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }

  /* Ngón tay cần vùng chạm lớn hơn con trỏ chuột */
  .btn{ padding:10px 16px; }
  .btn-nho{ padding:8px 13px; }
  input, select, textarea{ font-size:16px; }  /* dưới 16px iOS tự phóng to trang */

  /* Bảng: chữ nhỏ lại một chút, bớt đệm, để bớt phải cuộn ngang */
  table.bang{ font-size:.82rem; }
  table.bang th, table.bang td{ padding:9px 10px; }

  /* Dải việc cần xử lý: ô gọn lại, vẫn cuộn ngang được */
  .vcl{ gap:8px; }
  .vcl-o{ padding:8px 12px 8px 10px; font-size:.8rem; }
  .vcl-so{ font-size:1.15rem; }

  /* Biểu đồ cột trên trang Tổng quan: thấp lại cho vừa màn hình */
  .bd{ height:180px; }
}

/* Màn hình rất hẹp — điện thoại cũ, hoặc phóng to chữ hệ thống */
@media (max-width:380px){
  .noi-dung{ padding:10px 8px; }
  .card-body{ padding:12px 10px; }
  .vcl-nhan{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
}

/* =====================================================================
 *  TRỢ LÝ — BẢNG TRƯỢT TỪ BÊN PHẢI
 *
 *  Mở được từ mọi trang, không phải rời trang đang làm dở để đi hỏi một
 *  câu rồi quay lại. Đây là điểm khác quan trọng so với trang trợ lý cũ.
 *
 *  Trên điện thoại bảng chiếm trọn màn hình — bảng hẹp 380px trên màn
 *  360px thì vừa tràn vừa khó gõ.
 * ===================================================================== */
.ai-nut{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:8px;
  background:var(--dong); color:#fff; border:0; border-radius:999px;
  padding:11px 18px; font-size:.88rem; font-weight:500; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(18,22,28,.45);
  transition:transform .15s, box-shadow .15s;
}
.ai-nut::before{ content:'✦'; font-size:1rem; }
.ai-nut:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(18,22,28,.55); }
.ai-nut.an{ display:none; }

.ai-bang{
  position:fixed; top:0; right:0; bottom:0; width:390px; max-width:100%;
  background:var(--the); border-left:1px solid var(--vien); z-index:70;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  box-shadow:-12px 0 32px -16px rgba(18,22,28,.35);
}
.ai-bang.mo{ transform:none; }

.ai-dau{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--vien);
}
.ai-ten{ font-weight:600; }
.ai-phu{ font-size:.82rem; color:var(--muc-3); margin-top:2px; }
.ai-dong{
  background:none; border:0; font-size:1rem; cursor:pointer; color:var(--muc-3);
  padding:2px 6px; border-radius:6px;
}
.ai-dong:hover{ background:var(--nen); color:var(--muc); }

.ai-than{ flex:1; overflow-y:auto; padding:14px 16px; }

.ai-goi-y{ display:flex; flex-direction:column; gap:8px; }
.ai-chip{
  text-align:left; background:var(--nen); border:1px solid var(--vien);
  border-radius:10px; padding:10px 13px; font-size:.85rem; cursor:pointer;
  color:var(--muc); transition:border-color .12s, background .12s;
}
.ai-chip:hover{ border-color:var(--dong); background:var(--the); }

.ai-tin{ margin-bottom:12px; display:flex; }
.ai-tin.toi{ justify-content:flex-end; }
.ai-bong{
  max-width:88%; padding:9px 13px; border-radius:12px; font-size:.87rem;
  line-height:1.55; white-space:pre-wrap; word-break:break-word;
}
.ai-tin.toi .ai-bong{ background:var(--dong); color:#fff; }
.ai-tin.may .ai-bong{ background:var(--nen); border:1px solid var(--vien); }
.ai-tin.loi .ai-bong{ background:var(--do-mo); border:1px solid var(--do); }

/* Ba chấm nhấp nháy trong lúc chờ — không có thì người dùng tưởng treo */
.ai-cho span{
  display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%;
  background:var(--muc-3); animation:ai-nhay 1.2s infinite;
}
.ai-cho span:nth-child(2){ animation-delay:.18s; }
.ai-cho span:nth-child(3){ animation-delay:.36s; }
@keyframes ai-nhay{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

.ai-chan{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--vien);
}
.ai-chan input{ flex:1; margin:0; }

@media (max-width:600px){
  .ai-bang{ width:100%; border-left:0; }
  .ai-nut{ right:12px; bottom:12px; padding:10px 15px; }
}
@media (prefers-reduced-motion: reduce){
  .ai-bang{ transition:none; }
  .ai-cho span{ animation:none; }
}

/* =====================================================================
 *  KHU PHÂN TÍCH
 *
 *  Thanh bên riêng vì phân tích có nhiều trang con; nhét hết vào menu
 *  trên cùng thì menu dài lê thê mà vẫn khó tìm.
 * ===================================================================== */
.pt-khung{ display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:start; }

.pt-ben{
  background:var(--the); border:1px solid var(--vien); border-radius:10px;
  padding:10px 0; position:sticky; top:14px;
}
.pt-nhom{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muc-3); padding:10px 14px 4px;
}
.pt-muc{
  display:block; padding:8px 14px; font-size:.86rem; color:var(--muc);
  text-decoration:none; border-left:2px solid transparent;
}
.pt-muc:hover{ background:var(--nen); text-decoration:none; }
.pt-muc.dang{ background:var(--dong-mo); border-left-color:var(--dong); font-weight:500; }

.pt-loc{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
}
.pt-loc input, .pt-loc select{ margin:0; width:auto; }

/* Thẻ chỉ số: ba cột trên màn rộng, xuống dần theo bề ngang */
.pt-the{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.pt-o{
  background:var(--the); border:1px solid var(--vien); border-radius:10px; padding:14px 16px;
}
.pt-nhan{ font-size:.82rem; color:var(--muc-3); }
.pt-so{
  font-family:'Newsreader', Georgia, serif; font-size:1.7rem; line-height:1.2;
  margin:4px 0 10px; font-variant-numeric:tabular-nums;
}
.pt-chan{ display:flex; gap:18px; font-size:.74rem; color:var(--muc-3); }
.pt-chan strong{ font-size:.82rem; color:var(--muc); font-weight:500; }

.pt-bd svg{ width:100%; height:auto; display:block; }
.pt-chu{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:.78rem; }
.pt-chu i{
  display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:6px;
  vertical-align:middle;
}

@media (max-width:1150px){
  .pt-the{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  /* Thanh bên thành hàng ngang cuộn được, nhường chỗ cho nội dung */
  .pt-khung{ grid-template-columns:1fr; }
  .pt-ben{ position:static; display:flex; gap:4px; overflow-x:auto; padding:8px; }
  .pt-nhom{ display:none; }
  .pt-muc{ white-space:nowrap; border-left:0; border-bottom:2px solid transparent; }
  .pt-muc.dang{ border-left:0; border-bottom-color:var(--dong); }
}
@media (max-width:600px){
  .pt-the{ grid-template-columns:1fr; }
  .pt-loc input, .pt-loc select{ flex:1 1 130px; }
}

/* =====================================================================
 *  HỘP THƯ ZALO
 *
 *  Ba cột trên màn rộng: danh sách, khung chat, thông tin khách. Màn hẹp
 *  thì xếp dọc — nhân viên hay mở trên điện thoại lúc không ngồi quầy.
 * ===================================================================== */
.zl-khung, .mxh-khung{
  display:grid; grid-template-columns:290px 1fr 280px; gap:14px;
  align-items:start; height:calc(100vh - 150px); min-height:460px;
}
.zl-ben, .mxh-ben, .zl-chinh, .mxh-chinh{
  background:var(--the); border:1px solid var(--vien); border-radius:10px;
  height:100%; display:flex; flex-direction:column; overflow:hidden;
}
.zl-phu, .mxh-phu{ height:100%; overflow-y:auto; }
.zl-phu .card, .mxh-phu .card{ margin-bottom:12px }

.zl-tim, .mxh-tim{ padding:10px; border-bottom:1px solid var(--vien) }
.zl-tim input, .mxh-tim input{ width:100%; margin:0 }

.zl-loc, .mxh-loc{ display:flex; border-bottom:1px solid var(--vien); overflow-x:auto }
.zl-loc a, .mxh-loc a{
  flex:1; text-align:center; padding:9px 6px; font-size:.78rem; white-space:nowrap;
  color:var(--muc-3); text-decoration:none; border-bottom:2px solid transparent;
}
.zl-loc a.dang, .mxh-loc a.dang{ color:var(--muc); border-bottom-color:var(--dong); font-weight:500 }

.zl-ds, .mxh-ds{ flex:1; overflow-y:auto }
.zl-dong, .mxh-dong{
  display:block; padding:10px 12px; border-bottom:1px solid var(--vien);
  text-decoration:none; color:var(--muc);
}
.zl-dong:hover, .mxh-dong:hover{ background:var(--nen); text-decoration:none }
.zl-dong.dang, .mxh-dong.dang{ background:var(--dong-mo) }
.zl-d1, .mxh-d1{ display:flex; align-items:center; gap:8px }
.zl-ten, .mxh-ten{ font-size:.88rem; font-weight:500; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.zl-moi, .mxh-moi{
  background:var(--do); color:#fff; font-size:.68rem; padding:1px 7px;
  border-radius:99px; flex:0 0 auto;
}
.zl-d2, .mxh-d2{ font-size:.78rem; color:var(--muc-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.zl-d3, .mxh-d3{ font-size:.7rem; color:var(--muc-3); opacity:.8; margin-top:3px }

.zl-dau, .mxh-dau{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--vien); flex:0 0 auto;
}
.zl-nut, .mxh-nut{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap }

.zl-than, .mxh-than{ flex:1; overflow-y:auto; padding:14px; background:var(--nen) }
.zl-tin, .mxh-tin{ display:flex; margin-bottom:9px }
.zl-tin.ra, .mxh-tin.ra{ justify-content:flex-end }
.zl-tin.note, .mxh-tin.note{ justify-content:center }
.zl-bong, .mxh-bong{
  max-width:74%; padding:8px 12px; border-radius:12px; font-size:.87rem;
  line-height:1.5; word-break:break-word;
}
.zl-tin.vao .zl-bong, .mxh-tin.vao .mxh-bong{ background:var(--the); border:1px solid var(--vien) }
.zl-tin.ra .zl-bong, .mxh-tin.ra .mxh-bong{ background:var(--dong); color:#fff }
.zl-tin.note .zl-bong, .mxh-tin.note .mxh-bong{ background:var(--vang-mo); border:1px solid #E0C98A; font-size:.8rem }
.zl-gio, .mxh-gio{ font-size:.68rem; opacity:.7; margin-top:4px }

.zl-cho, .mxh-cho{
  padding:9px 14px; background:var(--vang-mo); border-top:1px solid #E0C98A;
  font-size:.8rem; flex:0 0 auto;
}
.zl-soan, .mxh-soan{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--vien);
  flex:0 0 auto }
.zl-soan textarea, .mxh-soan textarea{ flex:1; margin:0; resize:none }
.zl-mau, .mxh-mau{ display:flex; gap:6px; flex-wrap:wrap; padding:0 12px 10px; flex:0 0 auto }

.zl-gc, .mxh-gc{
  border-top:1px solid var(--vien); padding:8px 0; font-size:.82rem;
}

@media (max-width:1100px){
.zl-khung, .mxh-khung{ grid-template-columns:250px 1fr; height:auto }
.zl-phu, .mxh-phu{ grid-column:1 / -1; height:auto }
.zl-ben, .mxh-ben, .zl-chinh, .mxh-chinh{ height:520px }
}
@media (max-width:700px){
.zl-khung, .mxh-khung{ grid-template-columns:1fr }
.zl-ben, .mxh-ben{ height:300px }
.zl-chinh, .mxh-chinh{ height:520px }
.zl-bong, .mxh-bong{ max-width:88% }
}

/* Tab theo số Zalo trong hộp thư */
/* Tab theo số trong hộp thư — dùng chung cho hộp thư Zalo và Facebook/TikTok */
.zl-tab, .mxh-tab{ display:flex; gap:2px; padding:8px 8px 0; overflow-x:auto;
  border-bottom:1px solid var(--vien) }
.zl-tab a, .mxh-tab a{
  display:flex; align-items:center; gap:5px; padding:6px 10px; font-size:.78rem;
  white-space:nowrap; color:var(--muc-3); text-decoration:none;
  border-radius:8px 8px 0 0;
}
.zl-tab a.dang, .mxh-tab a.dang{ background:var(--dong-mo); color:var(--muc); font-weight:500 }
.zl-tab a b, .mxh-tab a b{ background:var(--do); color:#fff; font-size:.66rem; padding:0 6px;
  border-radius:99px; font-weight:600 }
.zl-tab .cham, .mxh-tab .cham{ width:7px; height:7px; border-radius:50%; background:var(--muc-3); flex:0 0 auto }
.zl-tab .cham.on, .mxh-tab .cham.on{ background:var(--xanh) }

.zl-nhan-cham, .mxh-nhan-cham{ display:flex; gap:3px; margin-top:4px }
.zl-nhan-cham i, .mxh-nhan-cham i{ width:18px; height:3px; border-radius:2px; display:inline-block }

/* Nút nhỏ trên từng tin nhắn Zalo */
/* Nút nhỏ trên từng tin nhắn — dùng chung cho hộp thư Zalo và Facebook/TikTok */
.zl-mini, .mxh-mini{
  background:none; border:0; padding:0 4px; font-size:.68rem; cursor:pointer;
  color:inherit; opacity:.55; text-decoration:underline;
}
.zl-mini:hover, .mxh-mini:hover{ opacity:1 }

/* Bảng vân tay theo máy */
.vt-bang th.giua, .vt-bang td.giua{ text-align:center }
.vt-co{ color:var(--xanh); font-size:1.05rem; font-weight:600 }
.vt-nap{ color:var(--vang); font-size:1.05rem; background:none; border:0; cursor:pointer; padding:2px 6px }
.vt-thieu{ color:var(--muc-3); opacity:.5; background:none; border:0; cursor:pointer; padding:2px 6px }
.vt-nap:hover, .vt-thieu:hover{ opacity:1; background:var(--nen); border-radius:5px }

@media print{
  .tn, .card-head .btn, .pt-the, .alert-info{ display:none }
  .card{ border:0; box-shadow:none }
}