:root {
  --xanh: #00A09D;
  --xanh-dam: #00807e;
  --vien: #e3e6ea;
  --nen: #f6f8fa;
  --chu: #1f2328;
  --mo: #5b6570;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--chu); background: #fff;
  font: 15px/1.5 system-ui, "Segoe UI", Arial, sans-serif;
}
a { color: #0b5aa8; }

/* ---- thanh trên ---- */
header.dau {
  background: var(--xanh); color: #fff; padding: 10px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
header.dau .ten { font-weight: 700; font-size: 18px; }
header.dau .phai { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; }
header.dau a { color: #fff; text-decoration: none; }
.bang-che-do {
  padding: 3px 12px; border-radius: 14px; font-weight: 700; font-size: 13px;
  background: #1565c0; color: #fff;             /* CHỈ ĐỌC = xanh dương */
}
.bang-che-do.chi-doc { background: #1565c0; color: #fff; }
.bang-che-do.that { background: #c62828; color: #fff; }   /* GHI THẬT = đỏ */

nav.menu {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--nen); border-bottom: 1px solid var(--vien); padding: 0 18px;
}
nav.menu a {
  padding: 10px 14px; text-decoration: none; color: #333; font-size: 14px;
  border-bottom: 3px solid transparent;
}
nav.menu a:hover { background: #eceff3; }
nav.menu a.dang { border-bottom-color: var(--xanh); font-weight: 700; color: var(--xanh-dam); }

main { padding: 18px; max-width: 1280px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 22px 0 8px; }
p.dan { color: var(--mo); margin: 0 0 16px; }

/* ---- khối ---- */
.the {
  border: 1px solid var(--vien); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
  background: #fff;
}
.hang { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.o { display: flex; flex-direction: column; gap: 4px; }
.o > label { font-weight: 600; font-size: 13px; }
input[type=date], input[type=text], input[type=password], input[type=email], select, textarea {
  padding: 8px 10px; font-size: 14px; border: 1px solid #c9ced6; border-radius: 7px;
  font-family: inherit; background: #fff;
}
textarea { font-family: Consolas, monospace; font-size: 13px; }
button {
  padding: 9px 16px; font-size: 14px; font-weight: 700; border: none; border-radius: 7px;
  cursor: pointer; background: var(--xanh); color: #fff;
}
button:hover { background: var(--xanh-dam); }
button.phu { background: #e8f4fd; color: #0b5aa8; }
button.phu:hover { background: #d3e9fb; }
button.canh { background: #b34700; }
button.canh:hover { background: #963c00; }
/* Nút GHI dữ liệu lên Odoo — luôn cam đậm, luôn phải xác nhận trước khi chạy */
button.ghi { background: #c25100; box-shadow: inset 0 0 0 2px #8a3a00; }
button.ghi:hover { background: #a34400; }
button:disabled { background: #d7dbe0 !important; color: #8b939c; cursor: not-allowed; }

/* ---- hộp thông báo ---- */
.hop { border-radius: 8px; padding: 10px 13px; margin: 10px 0; font-size: 14px; }
.ok   { background: #e7f7ee; border: 1px solid #b7e4c9; color: #17643a; }
.canh-bao { background: #fff5e5; border: 1px solid #ffd591; color: #8a5300; }
.loi  { background: #fdecec; border: 1px solid #f5b5b5; color: #a11b1b; }
.tt   { background: var(--nen); border: 1px solid var(--vien); color: #444; }
.hop ul { margin: 6px 0 0 18px; padding: 0; }

/* ---- bảng ---- */
table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13.5px; }
th, td { border: 1px solid var(--vien); padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: var(--nen); font-weight: 600; position: sticky; top: 0; }
td.so, th.so { text-align: right; white-space: nowrap; }
tr.bo td { color: #888; }
.cuon { max-height: 460px; overflow: auto; border: 1px solid var(--vien); border-radius: 8px; }
.cuon table { margin: 0; border: none; }

/* ---- thẻ tab ---- */
.tab { display: flex; gap: 4px; border-bottom: 2px solid var(--vien); margin-top: 14px; }
.tab button {
  background: none; color: #444; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 9px 14px;
}
.tab button.dang { color: var(--xanh-dam); border-bottom-color: var(--xanh); }
.tab button:hover { background: var(--nen); }
.bang-tab { display: none; }
.bang-tab.dang { display: block; }

.nho { font-size: 12.5px; color: var(--mo); }
.chay { color: var(--mo); font-style: italic; }
pre.log {
  background: #1e1e1e; color: #e6e6e6; padding: 10px; border-radius: 8px;
  font: 12px/1.45 Consolas, monospace; max-height: 300px; overflow: auto; white-space: pre-wrap;
}
.dang-nhap-khung { max-width: 420px; margin: 8vh auto; }


/* ---- Lưới phân quyền (trang Người dùng) ---- */
table.luoi-quyen th, table.luoi-quyen td { text-align: center; }
table.luoi-quyen td:first-child, table.luoi-quyen th:first-child { text-align: left; }
table.luoi-quyen td.khong-ap-dung { background: #ececec; color: #9a9a9a; }
table.luoi-quyen td.khac-mau { background: #fff2c9; box-shadow: inset 0 0 0 2px #d79b00; }
label.ngang { display: inline-block; margin-right: 12px; font-weight: normal; }
button.thieu-quyen { opacity: .55; text-decoration: line-through; }


/* ======================================================================
   ĐIỆN THOẠI (màn hình hẹp hơn 700px)
   Ba việc: menu gọn lại thành nút ☰, bảng rộng cuộn ngang trong khung
   riêng, và KHÔNG để cả trang bị tràn ngang.
   ====================================================================== */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }   /* không tràn ngang */
  body { font-size: 15px; }

  /* --- thanh trên --- */
  header.dau { padding: 8px 12px; gap: 8px; }
  header.dau .ten { font-size: 15px; width: 100%; }
  header.dau .phai { margin-left: 0; width: 100%; justify-content: space-between;
                     font-size: 13px; }
  .bang-che-do { font-size: 11.5px; padding: 2px 9px; }

  /* --- menu: gọn lại thành MỘT hàng cuộn ngang --- */
  nav.menu {
    display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 0;
    overflow-x: auto; overflow-y: hidden; padding: 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;                 /* Firefox: thanh cuộn mảnh */
  }
  nav.menu::-webkit-scrollbar { height: 3px; }
  nav.menu::-webkit-scrollbar-thumb { background: #c7ced6; border-radius: 3px; }
  nav.menu a { flex: 0 0 auto; padding: 11px 12px; font-size: 14px; }

  main { padding: 12px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; margin: 18px 0 8px; }
  .the { padding: 12px; border-radius: 8px; }

  /* --- ô nhập: mỗi thứ một dòng, rộng hết bề ngang --- */
  .hang { gap: 10px; }
  .hang > .o, .hang > button { width: 100%; min-width: 0 !important; }
  .o > input, .o > select, .o > textarea { width: 100%; }
  button { padding: 11px 14px; }                       /* ngón tay bấm cho trúng */

  /* --- BẢNG: cuộn ngang trong khung riêng, không kéo giãn cả trang --- */
  .cuon { max-height: 66vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .cuon table { width: auto; min-width: 100%; }        /* rộng theo nội dung -> cuộn */
  .cuon th { white-space: nowrap; }                    /* tiêu đề cột không gãy chữ */
  .cuon th, .cuon td { min-width: 84px; padding: 7px 8px; }
  .cuon td.so, .cuon th.so { min-width: 60px; }
  /* Cột chứa câu dài: vẫn xuống dòng, nhưng đủ rộng để đọc */
  .cuon td.dai, .cuon th.dai { white-space: normal; min-width: 190px; max-width: 72vw; }
  /* Bảng dạng "tên : giá trị" thì để chữ xuống dòng cho dễ đọc */
  table.bang-doc { width: 100%; min-width: 0; }
  table.bang-doc th, table.bang-doc td { min-width: 0; white-space: normal; width: auto; }
  table.bang-doc th { width: 40% !important; }

  /* chuỗi dài (địa chỉ, đường dẫn) phải tự xuống dòng, không đẩy trang rộng ra */
  td, .nho, .hop, pre.log, code { overflow-wrap: anywhere; word-break: break-word; }

  .tab { overflow-x: auto; white-space: nowrap; }
  .tab button { padding: 9px 11px; font-size: 13.5px; }
  textarea { font-size: 12px; }
  .dang-nhap-khung { max-width: 100%; margin: 3vh auto; }
  table.luoi-quyen td, table.luoi-quyen th { min-width: 74px; }
  table.luoi-quyen td:first-child, table.luoi-quyen th:first-child { min-width: 150px; }
}