/* CHẾ ĐỘ SHOP — petshop: bán lẻ + spa/grooming + khách sạn thú cưng.
   CỐ Ý KHÁC bản clinic: KHÔNG sidebar navy. Màn này đặt ở QUẦY, chạm bằng
   ngón tay trên máy tính bảng — thanh trên ấm + thẻ bo tròn to + nút to.
   Tông đỏ-vàng kim theo icon PetID247 (bản clinic là navy-teal). */

:root{
  /* Sidebar nâu đậm — khác navy của clinic, để nhìn một cái là biết đang ở app nào. */
  --ben1:#241a14; --ben2:#33241a;
  --ben-vien:#3f2e21; --ben-o:#2c2018; --ben-di:#3d2c1f;
  --ben-chu:#e8dccf; --ben-mo:#a08d79; --nhan-nhat:#f59e0b;

  --nen:#faf7f2; --nen-nhe:#fdfbf8; --the:#fff;
  --line:#eae3d9; --line2:#f2ece4; --vien-dam:#d9cdbd;
  --text:#2a201a; --mo:#8a7a6c; --mo2:#b3a595;
  --nhan:#c2410c; --nhan-dam:#9a3412; --nhan-nhe:#fff3ec;
  --nhan-bong:rgba(194,65,12,.3);
  --sh:0 1px 3px rgba(42,32,26,.07); --sh2:0 6px 22px rgba(42,32,26,.11);
  --r:18px;
}
body{background:var(--nen);color:var(--text);
  padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--nhan)}

/* Thanh tab ngang CŨ đã gỡ 23/09/2026: 12 mục thì tràn ra ngoài màn hình,
   thợ không thấy hết. Nay dùng chung vỏ sidebar với clinic (base.css).
   .trang vẫn cần vì vỏ chung dùng nó. */
.trang{padding:20px;max-width:1520px;width:100%}

/* nút to hơn bản clinic — chạm ngón tay */
.nut{border-radius:12px;padding:10px 17px;font-size:14px;font-weight:800;
  border-width:1.5px}
.nut.nho{padding:6px 12px;font-size:12.5px;border-radius:9px}

.the>h2{padding:15px 18px;font-size:15px}
.the .noi{padding:16px 18px}
.the .ghi{padding:12px 18px;font-size:12.5px}
.ds{padding:11px 18px}
.ds .av{width:36px;height:36px;border-radius:11px}
.ds .t{font-size:13.5px;font-weight:800}

.o-so{padding:15px 17px;border-radius:var(--r)}
.o-so .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:18px;margin-bottom:10px;background:var(--nen)}
.o-so .lb{font-size:12.5px}
.o-so .ph{font-size:11.5px;font-weight:700;margin-top:6px}
.o-so.a .ic{background:var(--nhan-nhe)} .o-so.a .so{color:var(--nhan-dam)} .o-so.a .ph{color:var(--nhan)}
.o-so.b .ic{background:#ecfdf5} .o-so.b .so{color:#047857} .o-so.b .ph{color:#047857}
.o-so.c .ic{background:#f0f9ff} .o-so.c .so{color:#0369a1} .o-so.c .ph{color:#0369a1}
.o-so.d .ic{background:#fef2f2} .o-so.d .so{color:#b91c1c} .o-so.d .ph{color:#b91c1c}
.o-so.e .ic{background:var(--nen)} .o-so.e .ph{color:var(--mo)}

/* ---------- ô quét thẻ ---------- */
.quet{display:flex;align-items:center;gap:13px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r);padding:13px 16px;margin-bottom:18px;box-shadow:var(--sh)}
.quet .qr{width:50px;height:50px;border-radius:14px;flex:none;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:25px;
  background:linear-gradient(140deg,#c2410c,#ea580c);box-shadow:0 3px 12px rgba(194,65,12,.3)}
.quet .noi{flex:1;min-width:0}
.quet .noi b{display:block;font-size:15.5px;font-weight:800}
.quet .noi small{display:block;font-size:12.5px;color:var(--mo);margin-top:2px;line-height:1.4}
.quet form{display:flex;gap:9px;flex:none}
.quet input{border:1.5px solid var(--line);border-radius:12px;padding:10px 13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.08em;
  outline:none;width:160px;color:var(--text)}
.quet input:focus{border-color:var(--nhan)}

/* ---------- lịch thợ ---------- */
.lich-boc{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lich{min-width:900px;position:relative}
.lich .gio-hang,.tho{display:grid;grid-template-columns:132px repeat(var(--cot,10),1fr)}
.lich .gio-hang{border-bottom:1px solid var(--line2);background:var(--nen-nhe)}
.lich .gio-hang div{padding:8px 4px;font-size:11.5px;font-weight:800;color:var(--mo);
  text-align:center;border-left:1px solid var(--line2)}
.lich .gio-hang div:first-child{text-align:left;padding-left:18px;border-left:none}
.tho{border-bottom:1px solid var(--line2);min-height:62px;position:relative}
.tho:last-child{border-bottom:none}
.tho .ten{padding:11px 10px 11px 18px;display:flex;align-items:center;gap:9px;
  border-right:1px solid var(--line2);background:#fff;position:relative;z-index:4}
.tho .ten .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,#c2410c,#ea580c)}
/* Moi tho mot mau — nhin luot la biet hang nao cua ai, khong phai doc ten. */
.tho .ten .av[style*="--m:0"],.lich-ds .av[style*="--m:0"]{background:linear-gradient(140deg,#7c3aed,#a855f7)}
.tho .ten .av[style*="--m:1"],.lich-ds .av[style*="--m:1"]{background:linear-gradient(140deg,#0369a1,#0284c7)}
.tho .ten .av[style*="--m:2"],.lich-ds .av[style*="--m:2"]{background:linear-gradient(140deg,#be185d,#db2777)}
.tho .ten .av[style*="--m:3"],.lich-ds .av[style*="--m:3"]{background:linear-gradient(140deg,#047857,#059669)}
.tho .ten .av[style*="--m:4"],.lich-ds .av[style*="--m:4"]{background:linear-gradient(140deg,#b45309,#d97706)}
.tho .ten b{font-size:13px;font-weight:800;display:block;line-height:1.2}
.tho .ten small{font-size:11.5px;color:var(--mo);font-weight:700}
.tho .o{border-left:1px solid var(--line2)}
/* Khung việc nằm TRONG dải bên phải cột tên, không phải trên cả hàng —
   như vậy % tính theo đúng khung giờ, và không chui xuống dưới cột tên. */
.tho .dai{position:absolute;left:132px;right:0;top:0;bottom:0;z-index:2}
.viec{position:absolute;top:6px;bottom:6px;border-radius:10px;padding:6px 9px;
  font-size:11.5px;line-height:1.3;overflow:hidden;border:1px solid;margin:0 3px}
.viec b{display:block;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.viec span{display:block;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px}
.viec.tam{background:#f0f9ff;border-color:#bae6fd;color:#075985}
.viec.cat{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.viec.spa{background:#fdf2f8;border-color:#fbcfe8;color:#9d174d}
.viec.luu{background:#fffbeb;border-color:#fde68a;color:#92400e}
.viec.khac{background:var(--nen-nhe);border-color:var(--line);color:var(--mo)}
.bay-gio{position:absolute;top:0;bottom:0;width:2px;background:var(--nhan);z-index:3;
  pointer-events:none}
.bay-gio::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--nhan)}

/* ---------- phòng lưu trú ---------- */
.phong-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:11px;
  padding:16px 18px}
.phong{border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;
  background:var(--nen-nhe);min-height:104px;display:flex;flex-direction:column}
.phong .sl{font-size:11.5px;font-weight:800;color:var(--mo);letter-spacing:.06em}
.phong.co{background:#fff;border-color:#fcd34d;box-shadow:var(--sh)}
.phong.co .sl{color:#b45309}
.phong.tre{background:#fef2f2;border-color:#fecaca}
.phong.tre .sl{color:#b91c1c}
.phong .be{display:flex;align-items:center;gap:8px;margin-top:7px}
.phong .be .av{width:32px;height:32px;border-radius:50%;background:#fffbeb;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.phong .be b{font-size:13.5px;font-weight:800;display:block;line-height:1.2}
.phong .be small{font-size:11.5px;color:var(--mo);display:block}
.phong .ra{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:700;color:var(--mo)}
.phong .ra b{color:var(--text)}
.phong.tre .ra{color:#b91c1c}
.phong.rong{align-items:center;justify-content:center;border-style:dashed;color:var(--mo2);
  font-size:12.5px;font-weight:700}

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

/* ---------- ranh giới dữ liệu ---------- */
.ranh{border-color:#c7d2fe;background:#fbfcff}
.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:640px){
  .trang{padding:14px}
  .so-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .o-so{padding:12px 13px}
  .o-so .so{font-size:22px}
  .o-so .ic{width:30px;height:30px;font-size:15px;margin-bottom:7px}
  .quet{flex-wrap:wrap}
  .quet .noi{flex-basis:calc(100% - 64px)}
  .quet form{width:100%}
  .quet input{flex:1;width:auto}
  .phong-luoi{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));padding:13px 14px}
}

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

/* Lịch thợ trên điện thoại: lưới giờ ở 390px chỉ hiện 08:00–10:00 và toàn ô
   trống. Màn hẹp đổi sang danh sách theo thợ — ai rảnh, ai kín, nhìn là thấy. */
.lich-ds .tho-d{padding:12px 16px;border-top:1px solid var(--line2)}
.lich-ds .tho-d:first-child{border-top:none}
.lich-ds .tho-d .ten{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px}
.lich-ds .tho-d .ten .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,#c2410c,#ea580c)}
.lich-ds .tho-d .ten small{margin-left:auto;font-size:12px;color:var(--mo);font-weight:700}
.lich-ds .v{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:8px 10px;
  border-radius:11px;border:1px solid;font-size:13px;line-height:1.35}
.lich-ds .v .g{font-weight:800;font-variant-numeric:tabular-nums;flex:none;min-width:88px}
.lich-ds .v b{display:block}
.lich-ds .v.tam{background:#f0f9ff;border-color:#bae6fd;color:#075985}
.lich-ds .v.cat{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.lich-ds .v.spa{background:#fdf2f8;border-color:#fbcfe8;color:#9d174d}
.lich-ds .v.luu{background:#fffbeb;border-color:#fde68a;color:#92400e}
.lich-ds .v.khac{background:var(--nen-nhe);border-color:var(--line);color:var(--mo)}
.lich-ds .ranh-tho{margin-top:6px;font-size:12.5px;color:var(--mo2);font-weight:700}
@media (max-width:640px){ .lich-boc{display:none} }