/* CHẾ ĐỘ CLINIC — phòng khám / bệnh viện thú y.
   Vỏ theo CHUẨN ADMIN của hệ sinh thái (feedback_admin_ui_standard, anh chốt
   21-22/06/2026): nội dung SÁNG + sidebar navy cố định 236px + top bar trắng ☰.
   Cố ý KHÁC bản shop — bản kia bỏ sidebar, dùng thanh trên ấm. */

:root{
  --ben1:#0b1220; --ben2:#111c31;        /* sidebar navy */
  --ben-vien:#1e293b; --ben-o:#0f1a2e; --ben-di:#16233b;
  --ben-chu:#cbd5e1; --ben-mo:#64748b; --nhan-nhat:#0891b2;

  --nen:#f1f5f9; --nen-nhe:#f8fafc; --the:#fff;
  --line:#e2e8f0; --line2:#eef2f6; --vien-dam:#cbd5e1;
  --text:#0f172a; --mo:#64748b; --mo2:#94a3b8;
  --navy:#0b1220; --navy2:#111c31;
  --nhan:#0e7490; --nhan-dam:#155e75; --nhan-nhe:#ecfeff;
  --nhan-bong:rgba(14,116,144,.3);
  --sh:0 1px 2px rgba(15,23,42,.06); --sh2:0 4px 16px rgba(15,23,42,.08);
  --r:14px;
}
body{background:var(--nen);color:var(--text)}
a{color:var(--nhan)}

/* ---------- bảng ca trực (kanban) ---------- */
.kan-boc{overflow-x:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
/* KHÔNG đặt min-width:max-content — thẻ dài nhất sẽ thổi cả lưới rộng ra và cột 4
   bị cắt ngay ở 1280px. minmax(232px,1fr) tự lo: đủ chỗ thì 4 cột vừa màn,
   hẹp thì tràn ra và .kan-boc cuộn ngang. */
.kan{display:grid;grid-template-columns:repeat(4,minmax(232px,1fr));gap:12px}
.cot{background:var(--nen-nhe);border:1px solid var(--line);border-radius:12px;padding:9px;
  min-width:232px}
.cot>.h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--mo);
  text-transform:uppercase;letter-spacing:.05em;padding:2px 3px 9px}
.cot>.h .n{margin-left:auto;background:#e2e8f0;color:#475569;border-radius:999px;
  padding:1px 7px;font-size:11px;letter-spacing:0}
.cot.cho>.h{color:#b45309} .cot.cho>.h .n{background:#fef3c7;color:#92400e}
.cot.kham>.h{color:var(--nhan-dam)} .cot.kham>.h .n{background:var(--nhan-nhe);color:var(--nhan-dam)}
.cot.xn>.h{color:#6d28d9} .cot.xn>.h .n{background:#f5f3ff;color:#6d28d9}
.cot.tien>.h{color:#047857} .cot.tien>.h .n{background:#ecfdf5;color:#047857}
.cot .rong{padding:16px 6px;text-align:center;color:var(--mo2);font-size:12px}

.be{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 11px;
  margin-bottom:8px;box-shadow:var(--sh);display:block;color:inherit}
.be:hover{box-shadow:var(--sh2);border-color:var(--vien-dam)}
.be:last-child{margin-bottom:0}
.be .h1{display:flex;align-items:center;gap:9px;color:inherit}
.be-nut{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--line)}
.be-nut form{display:inline}
.be .av{width:38px;height:38px;border-radius:50%;flex:none;background:var(--nhan-nhe);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  border:1.5px solid #fff;box-shadow:var(--sh)}
.be .ten{font-weight:800;font-size:14px;line-height:1.2}
.be .giong{font-size:11.5px;color:var(--mo);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.be .kg{margin-left:auto;flex:none;text-align:right}
.be .kg b{display:block;font-size:14px;font-weight:800;color:var(--nhan-dam);line-height:1}
.be .kg span{font-size:10.5px;color:var(--mo2);font-weight:700;letter-spacing:.04em}
.be .kg.len b::after{content:"▲";font-size:8px;margin-left:2px;color:#059669}
.be .kg.xuong b::after{content:"▼";font-size:8px;margin-left:2px;color:#dc2626}
.be .ly{margin-top:8px;font-size:12.5px;line-height:1.4;color:#334155}
.be .h2{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.be .bs{font-size:11px;color:var(--mo);font-weight:700;margin-left:auto}
.be.gap{border-color:#fecaca;background:#fffafa}
.be.gap .av{background:#fef2f2}

/* ---------- lưới 2 cột ---------- */
.hai{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start}

/* ---------- nội trú ---------- */
.nt{display:flex;align-items:center;gap:11px;padding:11px 16px;border-top:1px solid var(--line2)}
.nt:first-child{border-top:none}
.nt .o{width:42px;height:42px;border-radius:10px;flex:none;background:#0f172a;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.nt .o b{font-size:15px;font-weight:800}
.nt .o span{font-size:9px;letter-spacing:.06em;opacity:.65;margin-top:1px}
.nt .noi{flex:1;min-width:0}
.nt .t{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nt .cd{font-size:12px;color:var(--mo);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt .yl{flex:none;text-align:right;min-width:104px}
.nt .yl .gio{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.nt .yl .vi{font-size:11px;color:var(--mo);font-weight:600;margin-top:1px}
.nt.tre{background:#fef2f2}
.nt.tre .yl .gio{color:#b91c1c}

/* ---------- quét thẻ ---------- */
.quet{background:linear-gradient(135deg,#0e7490,#0891b2);color:#fff;border-radius:var(--r);
  padding:17px;margin-bottom:16px;box-shadow:0 6px 20px rgba(14,116,144,.28)}
.quet .h{display:flex;align-items:center;gap:11px}
.quet .qr{width:46px;height:46px;border-radius:11px;background:rgba(255,255,255,.17);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.quet b{display:block;font-size:14.5px;font-weight:800}
.quet small{display:block;font-size:11.5px;opacity:.85;margin-top:2px;line-height:1.4}
.quet form{margin-top:12px;display:flex;gap:8px}
.quet input{flex:1;min-width:0;background:rgba(255,255,255,.16);
  border:1px dashed rgba(255,255,255,.45);border-radius:10px;padding:9px 12px;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.09em;
  outline:none}
.quet input::placeholder{color:rgba(255,255,255,.55)}
.quet button{background:#fff;color:var(--nhan-dam);border:none;border-radius:10px;
  padding:0 15px;font-weight:800;font-size:13px;cursor:pointer;flex:none}

/* ---------- ranh giới dữ liệu ---------- */
.ranh{border-color:#c7d2fe;background:#fbfcff}
.ranh>h2{border-bottom-color:#e0e7ff}
.ranh .dong{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;font-size:12.5px;
  line-height:1.6}
.ranh .dong:last-child{margin-bottom:0}
.ranh .cham{width:9px;height:9px;border-radius:2px;flex:none;margin-top:5px}
.ranh .cham.vien{background:#4338ca}
.ranh .cham.be{background:var(--nhan)}

/* ---------- hẹp ---------- */
@media (max-width:1180px){ .hai{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .so-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .o-so{padding:11px 12px}
  .o-so .so{font-size:22px}
  .o-so .ph{display:none}
  .tren h1{font-size:14.5px}
}


/* ---------- A4: đọc thành bệnh án ---------- */
.mic-hop{display:flex;align-items:center;gap:14px;padding:16px}
.mic-nut{width:56px;height:56px;border-radius:50%;flex:none;border:2px solid #fecaca;
  background:#fef2f2;color:#b91c1c;font-size:24px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:transform .12s ease}
.mic-nut:hover:not(:disabled){transform:scale(1.05)}
.mic-nut:disabled{opacity:.45;cursor:not-allowed}
.mic-nut.dang{background:#b91c1c;border-color:#b91c1c;color:#fff;
  box-shadow:0 0 0 6px rgba(185,28,28,.15);animation:tho 1.4s ease-in-out infinite}
@keyframes tho{0%,100%{box-shadow:0 0 0 6px rgba(185,28,28,.15)}
               50%{box-shadow:0 0 0 12px rgba(185,28,28,.06)}}
.mic-chu{flex:1;min-width:0}
.mic-chu b{display:block;font-size:14.5px;font-weight:800}
.mic-chu small{display:block;font-size:12.5px;color:var(--mo);margin-top:3px;line-height:1.45}
.song{display:flex;align-items:flex-end;gap:3px;height:26px;flex:none}
.song i{width:4px;border-radius:2px;background:#b91c1c;display:block;
  animation:nhay 1s ease-in-out infinite}
.song i:nth-child(1){height:9px;animation-delay:0s}
.song i:nth-child(2){height:19px;animation-delay:.12s}
.song i:nth-child(3){height:13px;animation-delay:.24s}
.song i:nth-child(4){height:24px;animation-delay:.36s}
.song i:nth-child(5){height:11px;animation-delay:.48s}
.song i:nth-child(6){height:17px;animation-delay:.6s}
@keyframes nhay{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.the-tho{margin:0 16px 14px;background:var(--nen-nhe);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px}
.the-tho .nhan{font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--mo2);
  margin-bottom:4px}
.the-tho .nhan:not(:first-child){margin-top:10px}
#tho-chu{font-size:13px;line-height:1.55;color:#475569}
.da-sua{font-size:12.5px;color:#047857;font-weight:700}

/* ---------- 4 ô bệnh án ---------- */
.soap{display:grid;gap:13px}
.soap-o label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  margin-bottom:5px;color:var(--text)}
.soap-o .k{width:22px;height:22px;border-radius:6px;background:var(--nhan);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex:none}
.soap-o textarea{width:100%;border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;font:inherit;font-size:14px;line-height:1.55;background:#fff;
  color:var(--text);outline:none;resize:vertical}
.soap-o textarea:focus{border-color:var(--nhan);box-shadow:0 0 0 3px var(--nhan-nhe)}

/* ---------- dòng đề xuất sang phiếu ---------- */
.dong-de{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-top:1px solid var(--line2);cursor:pointer;font-size:13.5px}
.dong-de:first-child{border-top:none}
.dong-de input{width:17px;height:17px;flex:none;accent-color:var(--nhan);cursor:pointer}
.dong-de .ten{flex:1;min-width:0;font-weight:700}
.dong-de .gia{font-variant-numeric:tabular-nums;font-weight:800;flex:none}
.dong-de .gia.thieu{color:#b45309;font-weight:700;font-size:12px}

/* Khung "Dữ liệu nằm ở đâu": giữ trên màn (để không ai quên ranh giới), nhưng
   gập lại — dòng tóm tắt vẫn đọc được, không chiếm nửa màn điện thoại mỗi ngày. */
details.ranh>summary{list-style:none;cursor:pointer;margin:0;padding:13px 16px;font-size:14px;
  font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.ranh>summary::-webkit-details-marker{display:none}
details.ranh>summary .tom{flex:1 1 100%;font-size:12.5px;font-weight:600;color:var(--mo);
  line-height:1.5}
details.ranh>summary .mo-ra{margin-left:auto;font-size:12px;color:var(--nhan);font-weight:700}
details.ranh[open]>summary{border-bottom:1px solid var(--line2)}
details.ranh[open]>summary .tom{display:none}
details.ranh[open]>summary .mo-ra::after{content:" ▲"}
details.ranh:not([open])>summary .mo-ra::after{content:" ▼"}

@media (max-width:640px){
  .so-luoi>.o-so:last-child:nth-child(odd){grid-column:1/-1}
}

/* Bảng ca trực trên màn hẹp: 4 cột chỉ thấy ~1,3 cột, cột "Đang khám" phải
   vuốt mới thấy. Thêm hàng tab có số đếm + mỗi lần vuốt dừng đúng một cột. */
.kan-tab{display:none}
@media (max-width:900px){
  .kan-tab{display:flex;gap:6px;overflow-x:auto;padding:12px 16px 0;scrollbar-width:none}
  .kan-tab::-webkit-scrollbar{display:none}
  .kan-tab a{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;
    border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);
    font-size:12.5px;font-weight:800;min-height:40px}
  .kan-tab a .n{background:var(--nen);border-radius:999px;padding:0 7px;font-size:11.5px}
  .kan-tab a.on{background:var(--nhan);border-color:var(--nhan);color:#fff}
  .kan-tab a.on .n{background:rgba(255,255,255,.25)}
  .kan-boc{scroll-snap-type:x mandatory;scroll-padding-left:16px}
  .cot{scroll-snap-align:start}
}
@media (max-width:640px){
  .kan{grid-template-columns:repeat(4,calc(100vw - 72px))}
  .cot{min-width:0}
}

/* 25/09/2026 — the "Day len so PetID247" trong benh an */
.moc-dong{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.moc-dong .nhom{margin-top:8px}
.moc-chon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;cursor:pointer}
.moc-chon input{width:20px;height:20px}
.moc-da{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;padding:6px 0;border-bottom:1px dashed #e2e8f0}