/* =====================================================================
   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%; }

/* ---------- Menu trên điện thoại ----------
   Bản cũ xổ sẵn toàn bộ 13 nhóm và 61 mục con thành một tấm cao hơn
   2200px, lại neo theo thanh xanh đang dính, nên cuộn kiểu gì cũng không
   chạm tới quá nửa số mục. Hơn nữa .tn-muc vẫn xếp ngang, làm tên nhóm
   nằm bên trái còn mục con dạt sang phải.

   Bản này: menu thành tấm trượt chiếm trọn phần màn hình còn lại và tự
   cuộn; mỗi nhóm gập lại, chạm vào tên nhóm mới xổ mục con ra. */
@media (max-width:900px){
  /* Hàng trắng: tên cửa hàng dài thì cắt bớt thay vì đẩy vỡ hàng */
  /* Tên cửa hàng co lại tới đâu cũng được rồi cắt bằng dấu "…".
     Đặt max-width theo vw thì máy nào hẹp hơn lại tràn 1-2px, nên để nó
     tự co theo chỗ còn thừa: logo và cụm tài khoản bên phải giữ nguyên,
     phần dôi ra trừ vào tên. */
  .tb-1{ padding:0 12px; gap:10px; }
  .tb-logo{ min-width:0; flex:0 1 auto; }
  .tb-ten{ font-size:1rem; flex:1 1 auto; min-width:0;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tb-phai{ flex:0 0 auto; }
  .tb-nd{ display:none; }
  .tb-thoat{ padding:6px 10px; white-space:nowrap; }

  /* Nút ba gạch đổi thành dấu ✕ khi menu đang mở, để thấy ngay cách
     đóng lại. Menu phủ kín phần dưới thanh xanh nên không có chỗ nào
     khác mà chạm. */
  .tn-ham{ display:block; line-height:1; }
  .tn-ham[aria-expanded="true"]{ background:var(--thanh-3); border-radius:6px; }

  .tn-ds{
    display:none; position:fixed; left:0; right:0; top:102px; bottom:0;
    flex-direction:column; flex-wrap:nowrap; background:var(--thanh-2);
    padding:4px 0 28px; z-index:39;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .tn-ds.mo{ display:flex; }

  /* Tên nhóm ở trên, mục con nằm dưới — không còn xếp ngang */
  .tn-muc{ flex-direction:column; align-items:stretch; }
  .tn-nut{
    padding:13px 18px; justify-content:space-between; font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .tn-mui{ font-size:.72rem; opacity:.9; transition:transform .18s; }
  .tn-muc.tn-bung > .tn-nut .tn-mui{ transform:rotate(180deg); }
  .tn-muc.tn-bung > .tn-nut{ background:var(--thanh-3); color:#fff; font-weight:600; }

  /* Gập mục con lại. Hai dòng dưới phải đứng đúng thứ tự này: luật hover
     của bản máy tính mạnh ngang luật .tn-bung, nên cái nào viết sau thắng. */
  .tn-xo{
    position:static; min-width:0; border:0; border-radius:0; box-shadow:none;
    background:rgba(0,0,0,.18); padding:2px 0;
  }
  .tn-muc:hover > .tn-xo, .tn-muc:focus-within > .tn-xo{ display:none; }
  .tn-muc.tn-bung > .tn-xo{ display:block; }
  .tn-xo a{
    color:rgba(255,255,255,.88); padding:11px 18px 11px 32px;
    font-size:.9rem; white-space:normal;
  }
  .tn-xo a:hover, .tn-xo a.active{ background:rgba(0,0,0,.24); color:#fff; }

  .tn-ban{ margin-left:auto; }

  /* Nút trợ lý nổi đè lên menu (nó ở lớp cao hơn), che mất mục cuối —
     menu mở thì tạm giấu đi. */
  body.menu-mo .ai-nut{ 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=month],input[type=week],input[type=datetime-local],
input[type=email],input[type=search],input[type=tel],input[type=url],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,minmax(0,1fr)); }
  .grid-3,.grid-2{ grid-template-columns:minmax(0,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; }
/* minmax(0,1fr) chứ không phải 1fr: ô lưới mặc định không co nhỏ hơn nội
   dung bên trong, nên bảng rộng hay biểu đồ sẽ đẩy cả cột phình ra ngoài
   màn hình điện thoại, kéo theo cả trang trượt ngang. */
@media (max-width:1150px){ .cot-2{ grid-template-columns:minmax(0,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.

     Bắt mọi ô .o chứ không chỉ con trực tiếp của .hang: trang nhập hàng
     và sửa phiếu có ô nằm sâu trong thẻ, bản cũ bỏ sót nên min-width
     180px vẫn đẩy trang trượt ngang. */
  .hang{ gap:0; }
  .o{ flex:1 1 100% !important; min-width:0 !important; }

  /* Mọi con của .hang xuống dòng chiếm trọn bề ngang.
     Bản cũ liệt kê từng con số một (320px, 340px) nên hễ trang nào đặt
     330px là lọt lưới. Và quan trọng hơn: ô .day bên cạnh có flex-basis
     bằng 0 nên nó LUÔN "vừa" chỗ trống, không bao giờ chịu xuống dòng —
     nó ở lại cuối hàng với bề ngang 0 rồi để bảng bên trong tràn ra
     ngoài màn hình. Cho basis 100% thì nó mới chịu xuống. */
  .hang > *{ flex:1 1 100% !important; max-width:100% !important; min-width:0 !important; }
  [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:minmax(0,1fr); }
  .pt-the{ grid-template-columns:minmax(0,1fr) !important; }

  /* 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; }

  /* 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,minmax(0,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:minmax(0,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:minmax(0,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:minmax(0,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 }
}


/* =====================================================================
 *  CHẠM VÀ GÕ TRÊN ĐIỆN THOẠI
 *
 *  Khối này cố ý đặt ở CUỐI tệp. Media query không làm luật mạnh thêm,
 *  nên nếu viết ở trên thì luật gốc của biểu mẫu (nằm phía dưới, cùng
 *  độ mạnh) sẽ đè lại và coi như không viết gì.
 * ===================================================================== */
@media (max-width:900px){

  /* Ô nhập phải đủ 16px, nếu không Safari trên iPhone tự phóng to cả
     trang mỗi lần chạm vào ô, gõ xong lại phải chụm tay thu về.

     Danh sách kiểu phải chép lại đúng như luật gốc: luật gốc chọn theo
     input[type=…] nên mạnh hơn một chữ "input" trơn. */
  input[type=text],input[type=password],input[type=number],input[type=date],
  input[type=time],input[type=month],input[type=week],input[type=datetime-local],
  input[type=email],input[type=search],input[type=tel],input[type=url],select,textarea{ font-size:16px; }

  /* Ô tích và ô tròn mặc định chỉ 13px — đầu ngón tay khó trúng */
  input[type=checkbox],input[type=radio]{
    width:19px; height:19px; min-width:19px; flex:0 0 auto;
  }

  /* Thẻ số liệu đặt cứng số cột ngay trong HTML (grid-template-columns
     nội tuyến), luật thường không đè được nên phải !important */
  .pt-the{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:600px){
  .pt-the{ grid-template-columns:minmax(0,1fr) !important; }

  /* Tên trong bảng: cho cao hơn để ngón tay bấm trúng link */
  table.bang td a{ display:inline-block; padding:3px 0; }

  /* Ô giữa (bảng chấm công, bảng vân tay): link chiếm trọn ô thay vì
     chỉ bằng một ký tự. Dấu chấm rộng 4px thì không tài nào bấm trúng. */
  table.bang td.giua a{ display:block; }

  /* Hàng nút lọc đặt class .flex không có flex-wrap nên không xuống
     dòng được, nút cuối bị đẩy ra ngoài màn hình. */
  .flex{ flex-wrap:wrap; }
}