/* PetID247 Cơ sở — phần CHUNG cho cả hai chế độ.
   Vỏ riêng của từng chế độ nằm ở clinic.css / shop.css.

   🔴 Thêm tệp CSS mới thì PHẢI khai tên nó vào config._CSS, không thì
   ASSET_VER không đổi và trình duyệt/CDN phục vụ bản cũ (petid247 đã dính). */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  "Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
img{max-width:100%}
[hidden]{display:none!important}
button{font-family:inherit}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:7px 13px;
  font-size:13px;font-weight:700;border:1px solid var(--line);background:#fff;
  color:var(--text);cursor:pointer;white-space:nowrap}
.nut:hover{border-color:var(--vien-dam)}
.nut.chinh{background:var(--nhan);border-color:var(--nhan);color:#fff}
.nut.chinh:hover{filter:brightness(1.07)}
.nut.nho{padding:4px 9px;font-size:12px;border-radius:7px}
.nut.to{padding:10px 17px;font-size:14px;border-radius:12px;font-weight:800}
.nut:disabled{opacity:.5;cursor:not-allowed}

/* ---------- chip ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;
  font-size:11px;font-weight:800;white-space:nowrap}
.chip.xam{background:#f1f5f9;color:#64748b}
.chip.do{background:#fef2f2;color:#b91c1c}
.chip.vang{background:#fffbeb;color:#b45309}
.chip.xanh{background:#ecfdf5;color:#047857}
.chip.lam{background:#f0f9ff;color:#0369a1}
.chip.tim{background:#f5f3ff;color:#6d28d9}
.chip.hong{background:#fdf2f8;color:#be185d}

/* ---------- thẻ ---------- */
.the{background:var(--the);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.the>h2{margin:0;padding:13px 16px;font-size:14px;font-weight:800;display:flex;
  align-items:center;gap:8px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.the>h2 .phai{margin-left:auto;font-size:12.5px;font-weight:700;display:flex;gap:8px;
  align-items:center}
.the .noi{padding:14px 16px}
.the .ghi{background:var(--nen-nhe);border-top:1px solid var(--line2);padding:12px 16px;
  font-size:12px;color:var(--mo);line-height:1.55}
.the .ghi b{color:var(--text)}
.trong{padding:26px 16px;text-align:center;color:var(--mo);font-size:13px}

/* ---------- ô số ---------- */
.so-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:12px;margin-bottom:16px}
.o-so{background:var(--the);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--sh);position:relative;overflow:hidden}
.o-so .so{font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.o-so .so small{font-size:14px;font-weight:800}
.o-so .lb{font-size:12px;color:var(--mo);font-weight:700;margin-top:3px}
.o-so .ph{font-size:11px;color:var(--mo2);margin-top:5px;line-height:1.35}

/* ---------- danh sách ---------- */
.ds{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line2)}
.ds:first-child{border-top:none}
.ds .av{width:34px;height:34px;border-radius:50%;flex:none;background:var(--nen);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.ds .noi{flex:1;min-width:0}
.ds .t{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds .s{font-size:11.5px;color:var(--mo);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- báo ---------- */
.bao{border-radius:12px;padding:11px 15px;font-size:13px;font-weight:600;margin-bottom:14px;
  line-height:1.5}
.bao.loi{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.bao.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.bao.nhac{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.bao ul{margin:6px 0 0;padding-left:19px}

/* ---------- ô nhập (khuôn nhóm iOS Settings, dùng chung cả hệ) ---------- */
.glabel{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mo);
  font-weight:800;margin:20px 4px 8px}
.nhom{background:var(--the);border-radius:14px;overflow:hidden;box-shadow:var(--sh);
  border:1px solid var(--line)}
.o-nhap{padding:11px 15px;border-top:1px solid var(--line2)}
.o-nhap:first-child{border-top:none}
.o-nhap label{display:block;font-size:11.5px;color:var(--mo);font-weight:700;margin:0 0 3px}
.o-nhap input,.o-nhap select,.o-nhap textarea{width:100%;border:none;outline:none;
  font-size:15px;background:transparent;padding:0;color:var(--text);font-family:inherit}

/* ---------- trang đăng nhập / cài đặt ---------- */
.giua{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:26px 16px calc(26px + env(safe-area-inset-bottom,0px));background:var(--nen)}
.hop{width:100%;max-width:430px}
.hop .dau{text-align:center;margin-bottom:20px}
.hop .dau .lg{width:54px;height:54px;border-radius:15px;margin:0 auto 11px;display:flex;
  align-items:center;justify-content:center;font-size:27px;color:#fff;background:var(--nhan);
  box-shadow:0 4px 16px var(--nhan-bong)}
/* Logo THAT — to hon han o icon cu. Dat chieu cao co dan theo be ngang man hinh
   nhung co tran, de dien thoai khong bi logo an het man. */
.hop .dau .lg-anh{display:block;margin:0 auto 14px;width:clamp(104px,30vw,148px);
  height:auto;aspect-ratio:1}
.hop .dau h1{margin:0;font-size:20px;font-weight:800;color:var(--text)}
.hop .dau p{margin:5px 0 0;font-size:13px;color:var(--mo);line-height:1.5}
.hop .nut.chinh{width:100%;justify-content:center;margin-top:16px}
.chan{text-align:center;margin-top:18px;font-size:11.5px;color:var(--mo2);line-height:1.6}

/* ---------- bảng ---------- */
.bang-boc{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bang{width:100%;border-collapse:collapse;font-size:13px}
table.bang th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mo);font-weight:800;padding:9px 16px;border-bottom:1px solid var(--line2)}
table.bang td{padding:10px 16px;border-top:1px solid var(--line2)}
.ma{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  letter-spacing:.03em;color:var(--mo)}

/* ---------- dải trạng thái lớp của bé ---------- */
.lop-be{display:flex;align-items:center;gap:9px;border-radius:12px;padding:10px 14px;
  font-size:12.5px;font-weight:600;margin-bottom:16px;line-height:1.45}
.lop-be.chua{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.lop-be.roi{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.lop-be .ic{font-size:16px;flex:none}


/* ---------- form: hàng ô nằm ngang ---------- */
.hang-o{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hang-o input,.hang-o select{border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font:inherit;font-size:13.5px;background:#fff;color:var(--text);outline:none;min-width:0}
.hang-o input:focus,.hang-o select:focus{border-color:var(--nhan)}
.hang-o input[name=tim],.hang-o input[name=ma]{flex:1 1 180px;min-width:0}
.hang-o .nut{flex:none}
.hang-nut{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.ghi-nho{font-size:12px;color:var(--mo);margin:8px 4px 0;line-height:1.5}
.nho-mo{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--mo)}
.o-tho{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  font:inherit;font-size:14px;background:#fff;color:var(--text);outline:none;resize:vertical}
.o-tho:focus{border-color:var(--nhan)}
.o-chon-nho{border:1px solid var(--line);border-radius:8px;padding:4px 7px;font:inherit;
  font-size:12px;background:#fff;color:var(--text)}
.o-nhap textarea,.o-nhap select{width:100%;border:none;outline:none;font:inherit;font-size:15px;
  background:transparent;padding:0;color:var(--text);resize:vertical}
.o-nhap textarea{min-height:52px}

/* ---------- dòng y lệnh (dùng cả clinic lẫn shop) ---------- */
.y-dong{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;
  border-top:1px dashed var(--line);font-size:12.5px;margin-top:6px}
.y-dong .gio{font-weight:800;font-variant-numeric:tabular-nums;min-width:42px}
.y-dong .viec{flex:1;min-width:110px}
.y-dong.xong{opacity:.55}
.y-dong.tre .gio{color:#b91c1c}

/* ---------- biểu đồ cột ---------- */
.cot-bd{display:flex;gap:6px;align-items:flex-end;height:150px}
.cot-bd .mot-cot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-width:0}
.cot-bd .thanh{background:var(--nhan);border-radius:5px 5px 0 0;min-height:2px}
.cot-bd .nhan{font-size:11px;color:var(--mo);text-align:center;margin-top:5px;
  white-space:nowrap;overflow:hidden}


/* ---------- trang pháp lý (công khai, không có vỏ admin) ---------- */
.pl-vo{min-height:100vh;background:var(--nen)}
.pl-tren{background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
  padding-top:calc(12px + env(safe-area-inset-top,0px))}
.pl-ve{font-size:13.5px;font-weight:700}
.pl-hieu{font-size:13.5px;font-weight:800;color:var(--mo);margin-left:auto}
.pl-bai{max-width:760px;margin:0 auto;padding:26px 20px 60px;
  padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
.pl-bai h1{font-size:clamp(22px,5vw,30px);margin:0 0 6px;line-height:1.25}
.pl-ngay{color:var(--mo);font-size:13px;margin:0 0 22px}
.pl-bai h2{font-size:17px;margin:30px 0 8px;line-height:1.35}
.pl-bai p{margin:0 0 12px;line-height:1.7;font-size:15px}
.pl-bai ul{margin:0 0 14px;padding-left:20px;line-height:1.7;font-size:15px}
.pl-bai li{margin-bottom:6px}
.pl-bai a{text-decoration:underline}
.pl-khung{background:#fff;border:1px solid var(--line);border-left:4px solid var(--nhan);
  border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.65;margin:0 0 8px}
.pl-bang{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:14px}
.pl-bang th{text-align:left;padding:9px 12px;background:var(--nen-nhe);
  border:1px solid var(--line);font-size:12.5px;width:50%}
.pl-bang td{padding:11px 12px;border:1px solid var(--line);vertical-align:top;line-height:1.6}
.pl-nhac{background:#fffbeb;border:1px solid #fde68a;color:#78350f;border-radius:12px;
  padding:13px 15px;font-size:13.5px;line-height:1.6;margin-top:28px}
.pl-doi{display:flex;gap:10px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);font-size:13.5px;flex-wrap:wrap;
  justify-content:center;align-items:center}
.pl-doi span{opacity:.45}
@media (max-width:560px){ .pl-bang, .pl-bang tr, .pl-bang td, .pl-bang th{display:block;width:auto}
  .pl-bang th{border-bottom:none} .pl-bang td{border-top:none;margin-bottom:10px} }

.chan-phap-ly{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;
  justify-content:center;align-items:center}
.chan-phap-ly a{text-decoration:underline;opacity:.85}
.chan-phap-ly span{opacity:.45}


/* ═══ VỎ DASHBOARD DÙNG CHUNG (sidebar + top bar ☰) ═══
   Cả clinic lẫn shop đều dùng. Shop trước đây là thanh tab ngang, nhưng
   12 mục thì tràn ra ngoài màn hình — anh báo 23/09/2026. Màu lấy từ biến
   nên hai chế độ vẫn nhìn ra ngay là hai app khác nhau. */
/* ---------- vỏ ---------- */
.vo{display:flex;min-height:100vh}
.ben{width:236px;flex:none;background:linear-gradient(180deg,var(--ben1),var(--ben2));
  color:var(--ben-chu);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
.ben .hieu{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--ben-vien)}
.ben .hieu .lg{width:34px;height:34px;border-radius:9px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:18px;
  background:var(--nhan);box-shadow:0 2px 8px var(--nhan-bong)}
.ben .hieu .nm{font-weight:800;color:#fff;font-size:15px;line-height:1.15}
.ben .hieu .rl{font-size:12px;color:var(--ben-mo);font-weight:700;letter-spacing:.04em}
.ben .cs{margin:13px 12px;padding:10px 12px;background:var(--ben-o);border:1px solid var(--ben-vien);
  border-radius:11px}
.ben .cs .lb{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ben-mo);
  font-weight:800}
.ben .cs .v{font-size:13px;color:var(--ben-chu);font-weight:700;margin-top:3px;line-height:1.3}
.ben .cs .ma{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--nhan-nhat);margin-top:2px}
.ben nav{flex:1;overflow-y:auto;padding:0 10px 14px}
.ben .sep{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ben-mo);
  font-weight:800;padding:14px 8px 6px}
.ben nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--ben-chu);font-size:13.5px;font-weight:600;margin-bottom:1px}
.ben nav a .ic{width:19px;text-align:center;font-size:14.5px;flex:none}
.ben nav a:hover{background:var(--ben-di);color:#fff}
.ben nav a.on{background:var(--nhan);color:#fff;box-shadow:0 2px 8px var(--nhan-bong)}
.ben nav a .dem{margin-left:auto;background:var(--ben-vien);color:var(--ben-mo);border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:800}
.ben nav a.on .dem{background:rgba(255,255,255,.22);color:#fff}
.ben .chan{border-top:1px solid var(--ben-vien);padding:11px 16px;font-size:12.5px;color:var(--ben-mo);
  padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
.ben .chan b{display:block;color:var(--ben-chu);font-size:12.5px;font-weight:700}
.ben .chan a{color:var(--ben-mo)}
.ben .chan a:hover{color:var(--ben-chu)}

/* 🔴 min-width:0 — flex item mặc định min-width:auto, bảng nhiều cột bên trong
   sẽ thổi .chinh rộng ra và làm TRÔI NGANG cả trang. overflow-x trên thẻ bọc
   KHÔNG cứu được chừng nào chưa có dòng này. */
.chinh{flex:1;min-width:0;display:flex;flex-direction:column}
.tren{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  padding:0 18px;height:56px;padding-top:env(safe-area-inset-top,0px)}
.burger{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:16px;cursor:pointer;flex:none;color:var(--text)}
.tren h1{font-size:16px;margin:0;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tren .ngay{font-size:12px;color:var(--mo);font-weight:600;white-space:nowrap}
.tren .phai{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.trang{padding:18px;max-width:1520px;width:100%}
.phu{display:none}

.o-so::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.o-so.t::before{background:var(--nhan)} .o-so.t .so{color:var(--nhan-dam)}
.o-so.a::before{background:#d97706} .o-so.a .so{color:#b45309}
.o-so.r::before{background:#dc2626} .o-so.r .so{color:#b91c1c}
.o-so.g::before{background:#059669} .o-so.g .so{color:#047857}


@media (max-width:900px){
  .ben{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease}
  body.mo .ben{transform:none;box-shadow:0 0 44px rgba(0,0,0,.4)}
  .phu{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.mo .phu{opacity:1;pointer-events:auto}
  .trang{padding:14px}
  .tren{padding:0 13px}
  .tren .ngay{display:none}
}


/* ═══ TIỆN DỤNG TRÊN TABLET / ĐIỆN THOẠI (rà 24/09/2026 trên 3 cỡ màn) ═══ */

/* Ô số: 5 ô trên lưới 4 hay 2 cột thì ô cuối nằm lẻ một hàng. */
@media (max-width:900px) and (min-width:700px){
  .so-luoi{grid-template-columns:repeat(5,minmax(0,1fr))}
  .o-so .so{font-size:21px}
}
@media (max-width:699px) and (min-width:561px){
  .so-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Chỉ hiện trên màn hẹp / chỉ hiện trên màn rộng. */
.chi-hep{display:none}
@media (max-width:640px){
  .an-hep{display:none!important}
  .chi-hep{display:block}
  /* Dòng phụ trong danh sách: cắt "23/09/2026 2…" là mất đúng phần giờ. */
  .ds .s,.ds .t{white-space:normal}
}

/* 🔴 BẢNG → THẺ trên điện thoại. Bảng 5–6 cột ở 390px thì cột phải (nút Mở,
   ô Nhập thêm, Đặt lại MK) nằm NGOÀI màn, mà không có gì báo là còn cột để
   vuốt. Thêm class "xep" vào bảng, "dau" vào hàng tiêu đề; ô nào cần nhãn thì
   đặt data-nhan; ô chính "o-chinh" chiếm cả dòng; ô nút "o-nut" xuống cuối. */
@media (max-width:640px){
  table.bang.xep,table.bang.xep tbody,table.bang.xep tr,table.bang.xep td{display:block;width:auto}
  table.bang.xep tr.dau{display:none}
  table.bang.xep tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 18px;
    padding:12px 16px;border-top:1px solid var(--line2)}
  table.bang.xep tr:nth-child(2){border-top:none}
  table.bang.xep td{border:none;padding:0;min-width:0}
  table.bang.xep td.o-chinh{flex:1 1 100%;order:-1}
  table.bang.xep td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:11px;
    text-transform:uppercase;letter-spacing:.05em;color:var(--mo);font-weight:800;margin-bottom:1px}
  table.bang.xep td.o-nut{order:9;flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;text-align:left!important}
  table.bang.xep td.o-nut form{display:flex!important;flex:1}
  table.bang.xep td.o-nut .nut,table.bang.xep td.o-nut input{flex:1;justify-content:center}
  table.bang.xep td.o-nut .hang-o{flex-wrap:nowrap}
  table.bang.xep td .ma{word-break:normal}
}

/* 🔴 CHẠM BẰNG NGÓN TAY — nút 25px, ☰ 34px, "Đăng xuất" cao 13px là bấm trượt.
   Chỉ áp cho màn cảm ứng (pointer:coarse): PC dùng chuột vẫn giữ bố cục gọn. */
@media (pointer:coarse){
  .nut{min-height:42px}
  .nut.nho{min-height:40px;padding-top:6px;padding-bottom:6px}
  .burger{width:42px;height:42px;font-size:18px}
  .ben nav a{padding:11px 10px}
  .ben .chan a,.chan-phap-ly a{display:inline-block;padding:9px 3px}
  /* !important: vai template ghi cung style="width:auto" tren o tick */
  input[type=checkbox]{width:20px!important;height:20px}
  .nut.nho{min-width:40px;justify-content:center}
  .the>h2 .phai>a:not(.nut){display:inline-flex;align-items:center;min-height:40px}
  a.ma{display:inline-block;padding:10px 0}
  .o-chon-nho{min-height:38px}
  .hang-o input,.hang-o select{min-height:42px}
}

/* ô lọc đặt trên <select data-loc> (JS trong vỏ chèn vào) */
.o-loc,.o-nhap .o-loc{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font:inherit;font-size:14px;margin:4px 0 8px;background:#fff;color:var(--text);outline:none}
.o-loc:focus,.o-nhap .o-loc:focus{border-color:var(--nhan)}