/* Phúc An — giao diện quản lý. Tông nâu trầm, chữ có chân cho tiêu đề. */
:root {
  --nau: #493628;
  --nau-dam: #2f2219;
  --nau-chu: #42210b;
  --kem: #f8f4ed;
  --kem-dam: #efe8dc;
  --vien: #e3d9ca;
  --trang: #ffffff;
  --mo: #7a6a5c;
  --xanh: #4f6b45;
  --do: #a4442f;
  --vang: #b7862f;
  /* Phông có đủ dấu tiếng Việt (Georgia làm vỡ chữ Ấ, Ổ…) */
  --serif: "Noto Serif", "Times New Roman", serif;
  --sans: "Be Vietnam Pro", Arial, sans-serif;
  --bo: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); color: var(--nau-chu); background: var(--kem); font-size: 15px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }

/* ---------- Trang đăng nhập ---------- */
.dn { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.dn-trai {
  position: relative; color: #f5f5ec; padding: 52px 64px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(73,54,40,.94), rgba(47,34,25,.82)), var(--anh-nen, none) center/cover, var(--nau-dam);
}
.logo { display: flex; align-items: center; gap: 16px; }
.logo-o { border: 1px solid rgba(245,245,236,.6); padding: 10px 14px; font-family: var(--serif); font-size: 30px; letter-spacing: 1px; }
.logo-ten { font-size: 15px; letter-spacing: 3px; font-weight: 700; }
.logo-phu { font-size: 11px; letter-spacing: 3px; opacity: .8; margin-top: 6px; }
.dn-giua { margin-top: auto; margin-bottom: auto; }
.nho-hoa { font-size: 11px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; }
.dn-giua h1 { font-size: 52px; line-height: 1.2; margin: 22px 0; }
.dn-giua p { font-size: 16px; line-height: 1.7; max-width: 380px; opacity: .92; }
.dn-chan { font-size: 12px; opacity: .75; }
.dn-hoa { position: absolute; right: 40px; bottom: 40px; width: 180px; opacity: .22; }

.dn-phai { background: var(--kem); display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; }
.dn-khung { width: 100%; max-width: 420px; }
.dn-khung h2 { font-family: var(--sans); font-weight: 700; font-size: 30px; margin: 14px 0 12px; }
.dn-khung .mo { color: var(--mo); margin-bottom: 26px; line-height: 1.5; }
.chip { display: inline-block; padding: 7px 13px; border-radius: 999px; font-size: 13px; background: var(--kem-dam); }
.chip.dang { background: var(--nau); color: #fff; }
.dn-cuoi { font-size: 12px; color: var(--mo); text-align: center; margin-top: 60px; }
.loi { color: var(--do); font-size: 14px; min-height: 20px; margin: 8px 0; }

/* ---------- Ô nhập, nút ---------- */
.o { margin-bottom: 16px; }
.o label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.o input, .o select, .o textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--trang); outline: none;
}
.o textarea { min-height: 80px; resize: vertical; }
.o input:focus, .o select:focus, .o textarea:focus { border-color: var(--nau); box-shadow: 0 0 0 3px rgba(73,54,40,.15); }
.hang2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hang3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--bo);
  border: 1px solid var(--nau); background: var(--nau); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.nut:hover { background: var(--nau-dam); }
.nut.phu { background: transparent; color: var(--nau); }
.nut.phu:hover { background: var(--kem-dam); }
.nut.xoa { background: transparent; border-color: var(--do); color: var(--do); }
.nut.nho { padding: 6px 11px; font-size: 13px; }
.nut.to { width: 100%; padding: 16px 18px; justify-content: space-between; font-size: 15px; }

/* ---------- Khung ứng dụng ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.thanh-ben { background: var(--nau-dam); color: #efe6d8; padding: 24px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.thanh-ben .logo { padding: 0 10px 22px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.thanh-ben .logo-o { font-size: 20px; padding: 6px 9px; }
.thanh-ben .logo-ten { font-size: 12px; letter-spacing: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; color: #d9cdbb; margin-bottom: 2px;
}
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a.dang { background: var(--kem); color: var(--nau-chu); font-weight: 600; }
.menu svg { width: 18px; height: 18px; flex: none; }
.menu .nhom {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: none;
  color: #d9cdbb; font-size: 14px; cursor: pointer; text-align: left; margin-bottom: 2px;
}
.menu .nhom:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu .nhom .mui { margin-left: auto; transition: transform .15s; opacity: .7; }
.menu .nhom .dem + .mui { margin-left: 8px; }
.menu .nhom.mo .mui { transform: rotate(180deg); }
.menu .nhom.mo { color: #fff; }
.menu .con { margin: 0 0 8px 21px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.menu .con a { padding: 8px 10px; font-size: 13.5px; }
.thanh-ben nav { overflow-y: auto; flex: 1; margin-right: -6px; padding-right: 6px; }
.duong-dan { font-size: 13px; color: var(--mo); margin-bottom: 18px; }
.duong-dan b { color: var(--nau-chu); }
.the-tab { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.the-tab button { padding: 10px 16px; border-radius: var(--bo); border: 1px solid var(--vien); background: #fff; cursor: pointer; }
.the-tab button.dang { background: var(--nau); color: #fff; border-color: var(--nau); }
.canh-bao { background: #f8e7df; border: 1px solid #e6c2b4; color: var(--do); border-radius: var(--bo); padding: 10px 12px; font-size: 13px; margin: 8px 0; }
.ghi-chu-xanh { background: #e8eee3; border: 1px solid #cdd9c4; color: #3c5a33; border-radius: var(--bo); padding: 12px 14px; font-size: 14px; line-height: 1.6; }

/* POS bán tại quầy */
.pos { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.pos-sp { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pos-sp button { background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 16px 14px; text-align: left; cursor: pointer; min-height: 96px; }
.pos-sp button:hover { border-color: var(--nau); }
.pos-sp button b { display: block; margin-bottom: 8px; }
.pos-sp button:disabled { opacity: .45; cursor: not-allowed; }
.gio { position: sticky; top: 20px; }
.gio .dong-gio { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid #f0e9de; font-size: 14px; }
.so-luong { display: inline-flex; align-items: center; gap: 6px; }
.so-luong button { width: 28px; height: 28px; border: 1px solid var(--vien); background: #fff; border-radius: 6px; cursor: pointer; }

/* Chấm công */
.cc td, .cc th { padding: 6px 4px; text-align: center; font-size: 12px; }
.cc td:first-child, .cc th:first-child { text-align: left; padding-left: 14px; white-space: nowrap; }
.cc button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--vien); background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.cc button.du { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.cc button.nua { background: #c9d6c1; color: #2f4628; }
.cc button.phep { background: #f3e6cc; color: #7a5413; }
.cc .cn { background: #faf6ef; }
.menu .dem { margin-left: auto; background: var(--vang); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 7px; }
.thanh-ben .duoi { margin-top: auto; font-size: 13px; padding: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.thanh-ben .duoi button { background: none; border: 0; color: #d9cdbb; cursor: pointer; padding: 6px 0; text-decoration: underline; }

.chinh { padding: 30px 38px 60px; min-width: 0; }
.dau-trang { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.dau-trang h1 { font-size: 34px; }
.dau-trang .nho-hoa { color: var(--mo); margin-bottom: 8px; }
.cong-cu { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cong-cu input, .cong-cu select { padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: #fff; }
.mo-mobile { display: none; }

/* ---------- Thẻ, bảng ---------- */
.the { background: var(--trang); border: 1px solid var(--vien); border-radius: 14px; padding: 20px 22px; }
.the h3 { font-size: 19px; margin-bottom: 14px; }
.luoi-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.so-nhan { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mo); font-weight: 700; }
.so-lon { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); margin: 10px 0 4px; white-space: nowrap; }
.so-phu { font-size: 13px; color: var(--mo); }
.luoi-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }

.bang-boc { background: #fff; border: 1px solid var(--vien); border-radius: 14px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mo); font-weight: 700; padding: 13px 16px; background: #fbf8f3; border-bottom: 1px solid var(--vien); white-space: nowrap; }
td { padding: 13px 16px; border-bottom: 1px solid #f0e9de; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td b { white-space: nowrap; }
tbody tr:hover { background: #fcfaf6; }
.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hanh-dong { white-space: nowrap; text-align: right; }
.trong { padding: 48px 20px; text-align: center; color: var(--mo); }
.trong h3 { color: var(--nau-chu); margin-bottom: 8px; }
.trong .nut { margin-top: 16px; }

.nhan { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nhan.moi { background: #f3e6cc; color: #7a5413; }
.nhan.xu-ly { background: #e4e0f0; color: #4a3f7a; }
.nhan.giao { background: #dbe7f0; color: #2c5470; }
.nhan.xong { background: #dfe9da; color: #3c5a33; }
.nhan.huy { background: #f1dcd6; color: #8a3523; }
.nhan.xam { background: var(--kem-dam); color: var(--mo); }

.dong-list { display: flex; flex-direction: column; }
.dong-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0e9de; font-size: 14px; }
.dong-list > div:last-child { border-bottom: 0; }
.cot-bieu { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 10px; }
.cot-bieu .c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.cot-bieu .c i { display: block; width: 100%; max-width: 34px; background: var(--nau); border-radius: 5px 5px 0 0; min-height: 2px; }
.cot-bieu .c span { font-size: 11px; color: var(--mo); }

/* Bảng việc kiểu cột */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kanban .cot { background: var(--kem-dam); border-radius: 14px; padding: 14px; min-height: 200px; }
.kanban .cot h3 { font-size: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.viec { background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 14px; }
.viec b { display: block; margin-bottom: 6px; }
.viec .meta { font-size: 12px; color: var(--mo); display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.viec .meta .tre { color: var(--do); font-weight: 700; }

/* ---------- Hộp thoại ---------- */
.nen-hop { position: fixed; inset: 0; background: rgba(47,34,25,.45); display: flex; align-items: flex-start; justify-content: center; padding: 50px 16px; z-index: 50; overflow-y: auto; }
.hop { background: var(--kem); border-radius: 16px; width: 100%; max-width: 620px; padding: 26px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hop h2 { font-size: 26px; margin-bottom: 20px; }
.hop-chan { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dong-sp { display: grid; grid-template-columns: 1fr 90px 36px; gap: 8px; margin-bottom: 8px; }
.dong-sp select, .dong-sp input { padding: 10px; border: 1px solid var(--vien); border-radius: 8px; background: #fff; width: 100%; }
.dong-sp button { border: 1px solid var(--vien); background: #fff; border-radius: 8px; cursor: pointer; }
.tong { font-family: var(--serif); font-size: 22px; text-align: right; margin-top: 10px; }

.thong-bao { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--nau-dam); color: #fff; padding: 12px 20px; border-radius: 10px; z-index: 60; font-size: 14px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
  .dn { grid-template-columns: 1fr; }
  .dn-trai { padding: 32px 22px; min-height: 340px; }
  .dn-giua h1 { font-size: 36px; }
  .dn-phai { padding: 32px 16px; }
  .app { grid-template-columns: 1fr; }
  .thanh-ben { position: fixed; left: 0; top: 0; z-index: 40; width: 250px; transform: translateX(-100%); transition: transform .2s; }
  .thanh-ben.mo { transform: none; }
  .mo-mobile { display: inline-flex; margin-bottom: 14px; }
  .chinh { padding: 20px 16px 50px; }
  .luoi-so { grid-template-columns: 1fr 1fr; }
  .luoi-2, .kanban, .hang3, .pos { grid-template-columns: 1fr; }
  .dau-trang h1 { font-size: 28px; }
}
@media (max-width: 480px) { .hang2 { grid-template-columns: 1fr; } }