/* ⚠️ DÒNG NÀY PHẢI CÓ — thiếu nó thì mọi thứ lẽ ra phải ẩn đều hiện ra */
[hidden]{display:none!important}

/* ============================================================
   MÀU THEO LOGO THẬT THANH VŨ — cam + xám
   ⚠️ Số hiện tại là ƯỚC LƯỢNG đọc từ ảnh chị Thi gửi trong khung
      chat (30/08/2026), CHƯA đo từ file gốc. Có file gốc thì đo
      lại bằng máy và sửa đúng ba dòng --cam / --cam-dam / --xam.
   Cam làm màu chính (chữ TV, chữ THANH VŨ trong logo).
   Xám làm màu chữ và thanh đầu (tam giác trong chữ V, dòng
   "ĐIỆN MÁY - NỘI THẤT"). Nền trắng như logo.
   ============================================================ */
:root{
  --nen:#f6f6f7; --the:#ffffff; --chu:#2e2e30; --chu-nhat:#6e6e73;
  --dam:#58585b; --dam-hon:#414144; --dam-nhat:#6e6e73;
  --cam:#f4511e; --cam-dam:#d93f10; --cam-mo:rgba(244,81,30,.1);
  --vang:#f4511e; --vang-dam:#d93f10; --do-toi:#414144;
  --vien:#e3e3e5; --do:#c0392b; --xanh:#1e8449;
  --tren-dam:#ffffff;
  --bo-goc:10px; --bong:0 1px 3px rgba(65,65,68,.1);

  /* Dải màu CAM → XÁM NHẠT — chị Thi chốt 30/08/2026
     Cam giữ ở đầu dải cho nổi thương hiệu, tan dần về xám nhạt cho dịu mắt.
     Chỗ nào có chữ trắng đè lên thì dừng ở xám vừa (#5f5f63) chứ không
     xuống tới xám nhạt — không thì chữ chìm, nhân viên đọc không ra. */
  --dai-cam:linear-gradient(160deg,#f4511e 0%,#ff8a3d 30%,#d7d4d1 78%,#eceae8 100%);
  --dai-cam-ngang:linear-gradient(90deg,#f4511e 0%,#ff7a29 38%,#5f5f63 100%);
  --dai-cam-nut:linear-gradient(135deg,#ff8a3d 0%,#f4511e 60%,#d93f10 100%);
  --dai-cam-nhat:linear-gradient(135deg,#fff2ec 0%,#efedeb 100%);
  --dai-vet:linear-gradient(180deg,#f4511e 0%,#ff8a3d 45%,#cfccc9 100%);
}
@media (prefers-color-scheme:dark){
  :root{
    --nen:#161617; --the:#1f1f21; --chu:#ececee; --chu-nhat:#9a9a9f;
    --dam:#2a2a2c; --dam-hon:#161617; --dam-nhat:#3a3a3d;
    --cam:#ff6a3d; --cam-dam:#f4511e; --cam-mo:rgba(255,106,61,.15);
    --vang:#ff6a3d; --vang-dam:#f4511e;
    --vien:#333336; --bong:0 1px 3px rgba(0,0,0,.5);
    --dai-cam:linear-gradient(160deg,#f4511e 0%,#ff7a29 30%,#3a3a3d 80%,#2a2a2c 100%);
    --dai-cam-ngang:linear-gradient(90deg,#e8481a 0%,#ff6a3d 38%,#3a3a3d 100%);
    --dai-cam-nut:linear-gradient(135deg,#ff8a3d 0%,#f4511e 60%,#d93f10 100%);
    --dai-cam-nhat:linear-gradient(135deg,#2a201c 0%,#26262a 100%);
    --dai-vet:linear-gradient(180deg,#ff6a3d 0%,#f4511e 45%,#4a4a4d 100%);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--nen); color:var(--chu); -webkit-text-size-adjust:100%;
}
button,input{font:inherit}

/* Chất chữ: tiêu đề IN HOA, nét đậm, bóp sát — kiểu bảng hiệu công trường */
h1,h2,.bang th,.dinh-trai strong,.nut-chinh{
  text-transform:uppercase; letter-spacing:.6px; font-weight:800;
}

/* ---------- Màn đăng nhập ---------- */
.man-vao{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:var(--dai-cam);
  background-attachment:fixed;
}
.the-vao{
  width:100%; max-width:390px; background:var(--the);
  border:1px solid var(--vien); border-radius:14px;
  padding:30px 26px 26px; box-shadow:0 12px 34px rgba(90,88,86,.22);
}
.hieu{text-align:center; margin-bottom:22px}
/* Logo — hiện là BẢN VẼ LẠI, chờ file gốc của chị Thi để thay */
.logo-to{
  display:block; width:min(230px,80%); height:auto; margin:0 auto 14px;
}
.logo-nho{
  width:30px; height:30px; flex-shrink:0; display:block;
  background:#fff; border-radius:7px; padding:3px;
}
.hieu h1{margin:0; font-size:15px; color:var(--chu-nhat); letter-spacing:1.4px}
.phu{margin:6px 0 0; color:var(--chu-nhat); font-size:12.5px;
  text-transform:uppercase; letter-spacing:1.2px; font-weight:600}

label{display:block; margin:15px 0 6px; font-size:12px; font-weight:700;
  color:var(--chu-nhat); text-transform:uppercase; letter-spacing:.7px}
input[type=email],input[type=password],input[type=search]{
  width:100%; padding:13px 14px; border:1px solid var(--vien);
  border-radius:9px; background:var(--nen); color:var(--chu);
}
input:focus{outline:2px solid var(--dam-nhat); outline-offset:1px; border-color:transparent}
.o-co-nut{position:relative}
.o-co-nut input{padding-right:64px}
.o-co-nut .nut-nho{position:absolute; right:6px; top:50%; transform:translateY(-50%)}

.nut-chinh{
  width:100%; margin-top:22px; padding:15px; border:0; border-radius:9px;
  background:var(--dai-cam-nut); color:#fff; font-size:15px; cursor:pointer; min-height:50px;
  box-shadow:0 3px 12px rgba(217,63,16,.4);
}
.nut-chinh:hover{background:linear-gradient(135deg,#ff7a29 0%,#e8481a 55%,#c73809 100%)}
.nut-chinh:disabled{opacity:.65; cursor:progress; box-shadow:none}
.nut-nho{
  padding:7px 11px; border:1px solid var(--vien); border-radius:7px;
  background:var(--the); color:var(--chu-nhat); cursor:pointer; font-size:13px;
}
.nut-nho:hover{color:var(--cam-dam); border-color:var(--cam)}

.bao-loi{
  margin:15px 0 0; padding:11px 13px; border-radius:8px; font-size:14px;
  background:rgba(192,57,43,.1); color:var(--do);
  border-left:4px solid var(--do);
}
.ghi-chu{margin:15px 0 0; text-align:center; font-size:12.5px; color:var(--chu-nhat)}
.loi-nhac{
  margin:0 0 4px; padding:12px 14px; border-radius:9px; font-size:13.5px;
  background:var(--dai-cam-nhat); color:var(--chu); line-height:1.5;
  border-left:3px solid var(--cam);
}

/* ---------- Khung làm việc ---------- */
.khung{min-height:100dvh; display:flex; flex-direction:column}
.dinh{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:var(--dai-cam-ngang); color:var(--tren-dam);
  position:sticky; top:0; z-index:20;
  padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:0; box-shadow:0 2px 10px rgba(217,63,16,.28);
}
.dinh-trai{display:flex; align-items:center; gap:10px; min-width:0}
.dinh-trai strong{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dinh-phai{display:flex; align-items:center; gap:10px; flex-shrink:0}
.ten-nguoi{font-size:13px; color:#b9c5d1; max-width:130px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dinh .nut-nho{background:var(--dam-nhat); border-color:var(--dam-nhat); color:var(--tren-dam)}
.dinh .nut-nho:hover{background:var(--vang); border-color:var(--vang); color:var(--do-toi)}

.noi-dung{flex:1; padding:20px 16px 24px; max-width:1100px; width:100%; margin:0 auto}
.dau-man{display:flex; align-items:center; gap:11px; margin:0 0 15px;
  padding-left:11px; border-left:4px solid transparent;
  border-image:var(--dai-vet) 1}
.dau-man h2{margin:0; font-size:17px}
.dem{font-size:12px; background:var(--dai-cam-nhat);
  color:var(--cam-dam); padding:3px 11px; border-radius:20px; font-weight:700}
.o-tim{margin-bottom:15px}
.dang-tai,.trong{color:var(--chu-nhat); font-size:14px; padding:12px 0}

/* ---------- Bảng (máy tính) ---------- */
.cuon-ngang{overflow-x:auto; -webkit-overflow-scrolling:touch}
.bang{
  width:100%; border-collapse:collapse; background:var(--the);
  border:1px solid var(--vien); border-radius:var(--bo-goc); overflow:hidden;
  font-size:14.5px;
}
.bang th,.bang td{padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--vien); white-space:nowrap}
.bang th{background:var(--dai-cam-ngang); color:#fff; font-size:11.5px;
  letter-spacing:.8px; font-weight:800}
.bang tr:last-child td{border-bottom:0}
.bang tbody tr:hover{background:var(--cam-mo)}

/* ---------- Thẻ (điện thoại) ---------- */
.dan-the{display:none; flex-direction:column; gap:10px}
.the-nv{
  background:var(--the); border:1px solid var(--vien);
  border-left:4px solid var(--cam); border-radius:var(--bo-goc);
  padding:14px; box-shadow:var(--bong);
}
.the-nv .ten{font-weight:700; margin-bottom:4px; font-size:15.5px}
.the-nv .dong{font-size:13.5px; color:var(--chu-nhat); margin-top:4px}
.the-nv a{color:var(--cam-dam); font-weight:600}

.nhan-tt{display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.nhan-tt.dang-lam{background:rgba(30,132,73,.13); color:var(--xanh)}
.nhan-tt.nghi{background:rgba(192,57,43,.13); color:var(--do)}

.ho-so{background:var(--the); border:1px solid var(--vien);
  border-left:4px solid var(--vang);
  border-radius:var(--bo-goc); padding:20px; margin:0}
.ho-so dt{font-size:11.5px; color:var(--chu-nhat); margin-top:14px;
  text-transform:uppercase; letter-spacing:.7px; font-weight:700}
.ho-so dt:first-child{margin-top:0}
.ho-so dd{margin:4px 0 0; font-weight:600}

/* ---------- Thanh menu ---------- */
.thanh-menu{display:flex; gap:0; padding:0 16px; background:#3a3a3d;
  max-width:none; width:100%}
.thanh-menu-trong{max-width:1100px; margin:0 auto; width:100%; display:flex}
.muc{
  display:flex; align-items:center; gap:8px; padding:12px 18px;
  border:0; border-bottom:3px solid transparent; background:transparent;
  color:#93a2b1; cursor:pointer; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px;
}
.muc:hover{color:var(--tren-dam)}
.muc.dang-mo{color:#fff; border-bottom-color:var(--vang)}
.bieu-tuong{font-size:15px}

/* ============ ĐIỆN THOẠI: dưới 900px ============ */
@media (max-width:900px){
  .cuon-ngang{display:none}
  .dan-the{display:flex}

  /* Menu tụt xuống đáy cho ngón tay cái với tới */
  .thanh-menu{
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom));
    background:#2f2f31; border-top:3px solid transparent;
    border-image:var(--dai-cam-ngang) 1; gap:4px;
  }
  .muc{
    flex:1; flex-direction:column; gap:3px; justify-content:center;
    border-bottom:0; font-size:10.5px; padding:7px 4px; min-height:54px;
  }
  .muc.dang-mo{color:var(--vang); border-bottom:0}
  .bieu-tuong{font-size:21px}

  .noi-dung{padding-bottom:86px}
  .dinh-trai strong{font-size:13px}
  /* Màn hẹp: giấu tên người ở thanh đầu cho tên shop đủ chỗ.
     Tên người vẫn xem được đầy đủ ở tab Hồ sơ. */
  .ten-nguoi{display:none}

}