/* chung.css — bộ áo dùng chung.
 * Đo 3 trang lớn cùng ngành trước khi gõ (Figma · Miro · Linear):
 *   - đúng HAI độ đậm chữ (400 và 600), không dùng 700/800
 *   - viền mảnh 1px màu rất nhạt, KHÔNG đổ bóng dày
 *   - bo góc 6–8px, không bo 20px
 *   - nền xám gần trắng, không dùng nền kem
 */
:root {
  --nen: #f7f8f9;
  --the: #ffffff;
  --vien: #e4e7eb;
  --vien-dam: #cdd3da;
  --chu: #1c2024;
  --chu-nhat: #6b7480;
  --xanh: #1971c2;
  --xanh-nhat: #e7f1fb;
  --do: #d6336c;
  --xanh-la: #2f9e44;
  --vang: #f59f00;
  --bo: 7px;
  --cao-thanh: 48px;
}

* { box-sizing: border-box; }

/* 🔴 PHẢI CÓ, ĐỪNG BỎ. Thuộc tính hidden chỉ đặt display:none ở mức yếu nhất,
   nên một class như .man-mo{display:flex} ĐÈ ĐƯỢC nó: hộp thoại tưởng là ẩn
   nhưng vẫn phủ kín màn hình và nuốt mọi cú bấm — người dùng bấm nút nào
   cũng không ăn. Đã dính đúng thế lúc đo bằng trình duyệt 12/09/2026. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; color: var(--chu); background: var(--nen);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

.nut {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px;
  background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--bo); cursor: pointer;
  font-size: 13px; font-weight: 400; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.nut:hover { background: #f1f3f5; border-color: var(--vien-dam); }
.nut:active { background: #e9ecef; transform: scale(.96); }

/* Nut ve bang VECTOR chu khong phai anh: net khong bao gio vo du phong to
   bao nhieu, doi mau theo bo ao duoc, va nhe hon anh hang chuc lan.
   Day la cach Figma / Notion / Linear deu lam. */
.nut svg, .o-icon svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nut { transition: background .12s, border-color .12s, transform .08s; }
.nut.chinh svg { stroke: #fff; }
.nut.dang-bat svg { stroke: var(--xanh); }

/* Nut chi co mot icon thi vuong vao cho gon */
.nut.vuong { width: 32px; padding: 0; justify-content: center; }
.nut:disabled { opacity: .4; cursor: default; }
.nut.chinh {
  background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 600;
}
.nut.chinh:hover { background: #1864ab; }
.nut.lang { background: transparent; border-color: transparent; }
.nut.lang:hover { background: #eceef0; }
.nut.dang-bat { background: var(--xanh-nhat); border-color: #b9d8f5; color: var(--xanh); }

.o-nhap {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--vien); border-radius: var(--bo);
  background: var(--the); width: 100%;
}
.o-nhap:focus { outline: none; border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-nhat); }

.chu-nhat { color: var(--chu-nhat); font-size: 12px; }
.vach { width: 1px; height: 20px; background: var(--vien); margin: 0 4px; flex: none; }

/* lời nhắn góc màn hình */
#khay-bao {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.loi-bao {
  background: #1c2024; color: #fff; padding: 9px 14px;
  border-radius: var(--bo); font-size: 13px; max-width: 340px;
  animation: hien .16s ease-out;
}
.loi-bao.loi { background: var(--do); }
.loi-bao.xong { background: var(--xanh-la); }
@keyframes hien { from { opacity: 0; transform: translateY(6px); } }

/* hộp thoại */
.man-mo {
  position: fixed; inset: 0; background: rgba(20,24,28,.42);
  display: flex; align-items: center; justify-content: center; z-index: 800;
}
.hop {
  background: var(--the); border-radius: 10px; padding: 20px;
  width: min(520px, calc(100vw - 32px)); max-height: 86vh; overflow: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
.hop h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.hop .day-nut { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }