/* Menu */
nav {
  display: flex;
  justify-content: center; /* căn giữa menu */
  background: #004080;
  padding: 2px 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 14px;
}

nav a.active {
  color: #ff8000;   /* chữ cam */
  background: transparent; /* bỏ nền */
}

nav a:hover {
  color: #ff8000;   /* khi rê chuột, chữ cũng cam */
  background: transparent; /* bỏ nền */
}

/* Dropdown */
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #000;
  padding: 8px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Header */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.top-header .left {
    display: flex;
    align-items: center;
}
.top-header img.logo {
    height: 50px;
    margin-right: 10px;
}
.top-header h1 {
    font-size: 16px;
    color: #d2dde7;
    margin: 0;
}
.top-header .right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Lịch công tác */
.schedule-container {
    padding: 20px;
    background: #fff;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.schedule-title {
    text-align: center;
    color: #003366;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: center;
}

.schedule-table th,
.schedule-table td {
    border: 1px solid #ccc;
    padding: 8px;
}

.schedule-table thead th {
    background: #003366;
    color: #fff;
    font-weight: bold;
}

.schedule-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.schedule-day {
    background: #e6f0ff;
    font-weight: bold;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Header */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 3px solid #004080;
  padding: 5px 20px;
}

.top-header .left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-header .logo {
  height: 60px;
}

.top-header h1 {
  font-size: 20px;
  font-weight: bold;
  color: #004080;
}

.top-header .right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-box {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* Bố cục chính */
.container {
  display: flex;
  margin: 20px;
  gap: 20px;
}

/* Sidebar trái */
aside.left {
  width: 220px;
  background: #f3f3f3;
  border: 1px solid #ccc;
  padding: 10px;
}

aside.left .btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background: #004080;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-weight: bold;
}

aside.left .btn.active {
  background: #ff8000;
}

aside.left .info {
  display: none;
  margin-top: 10px;
  font-size: 14px;
}

aside.left .info.show {
  display: block;
}

aside.left ul {
  margin-left: 20px;
  list-style: disc;
}

aside.left .support {
  margin-top: 15px;
  padding: 10px;
  background: #e6ffe6;
  border: 1px solid #00b300;
  text-align: center;
  font-size: 14px;
  color: #004d00;
}

/* Nội dung chính */
main.content {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
  background: #fff;
}

main.content h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: #004080;
}

.form {
  text-align: center;
  margin-bottom: 20px;
}

.form input {
  padding: 8px;
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form button {
  padding: 8px 15px;
  margin-left: 10px;
  background: #28a745;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

.form button:hover {
  background: #218838;
}

/* Phiếu lấy số */
.ticket {
  margin: 0 auto;
  text-align: center;
  border: 2px solid #ccc;
  padding: 20px;
  width: 250px;
  background: #fffbe6;
  border-radius: 6px;
}

.ticket h2 {
  font-size: 28px;
  color: #ff0080;
  margin-bottom: 10px;
}

.ticket p {
  font-size: 14px;
  margin: 5px 0;
}
/* Sidebar phải */
aside.right {
  width: 3500px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 15px;
}

/* Khung ngày & số còn lại */
.date-box {
  text-align: center;
  background: #fff;
  border: 2px solid #999;
  padding: 15px;
  margin-bottom: 15px;
}

.date-box h3 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #333;
}

.date-box p {
  font-size: 16px;
  margin: 3px 0;
}

.date-box .remain {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.date-box .remain span {
  font-size: 40px;
  font-weight: bold;
  color: red;
  display: block;
  margin-top: 5px;
}

/* Ghi chú */
.note {
  font-size: 13px;
  color: #444;
  background: #fff8e1;
  border: 1px solid #ffcc00;
  padding: 8px;
  margin-bottom: 15px;
}

/* Danh sách số thứ tự */
.queue-list {
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.queue-list h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.queue-list ul {
  list-style: none;
}

.queue-list li {
  font-size: 14px;
  padding: 6px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.queue-list li:last-child {
  border-bottom: none;
}

/* Nút thao tác */
.queue-list button {
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.queue-list button.done {
  background: #28a745;
  color: #fff;
}

.queue-list button.call {
  background: #007bff;
  color: #fff;
}

/* Nút tab */
aside.left .btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background: #004080;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-weight: bold;
  border-radius: 4px;
}

aside.left .btn.active {
  background: #ff8000;
}

/* Nội dung tab */
aside.left .info {
  display: none;
  margin-top: 10px;
  font-size: 14px;
}

aside.left .info.show {
  display: block;
}

body {
      font-family: Arial, sans-serif;
      background: #fff;
      margin: 0;
      padding: 0;
    }



    /* Layout chính */
    main {
      display: flex;
      margin: 10px;
      gap: 10px;
    }
    aside.left {
      flex: 1;
      min-width: 220px;
    }
    section.center {
      flex: 2;
      background: #f5f8fc;
      padding: 10px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    aside.right {
      flex: 1;
      background: #f9f9f9;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    /* Sidebar */
    .btn {
      display: block;
      width: 100%;
      padding: 10px;
      margin-bottom: 6px;
      background: #2a64c5;
      color: #fff;
      border: none;
      cursor: pointer;
      text-align: left;
      font-weight: bold;
      border-radius: 3px;
      transition: 0.3s;
    }
    .btn.active { background: #ff8000; }
    .info {
      display: none;
      margin-top: 10px;
      padding: 8px;
      background: #eaf0fb;
      border-radius: 4px;
      animation: fadeInUp 0.5s ease;
    }
    .info.show { display: block; }
    .info p { font-weight: bold; margin-bottom: 8px; }
    .info ul { margin: 0; padding-left: 20px; }
    .info ul li { margin: 5px 0; list-style-type: disc; }
    .info ul li:hover { color: #d9534f; font-weight: bold; }
    .support {
      margin-top: 20px;
      background: #4CAF50;
      color: #fff;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      font-weight: bold;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Khung giữa */
    .number-box {
      background: #e6ffe6;
      border: 2px solid #ccc;
      padding: 15px;
      margin-top: 15px;
      border-radius: 5px;
    }
    .number-box h2 {
      font-size: 40px;
      color: #d9534f;
      margin: 10px 0;
    }
    .btn-action {
      background: #4CAF50;
      color: #fff;
      padding: 8px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
    }
    .btn-action:hover { background: #388e3c; }

    /* Cột phải */
    .right h3 {
      margin: 0;
      font-size: 18px;
      text-align: center;
    }
    .remain {
      font-size: 40px;
      color: red;
      text-align: center;
    }
    .queue-item {
      border: 1px solid #ccc;
      padding: 5px;
      margin: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn-done {
      background: #28a745;
      color: #fff;
      border: none;
      padding: 4px 8px;
      border-radius: 3px;
      cursor: pointer;
    }
    .btn-call {
      background: #007bff;
      color: #fff;
      border: none;
      padding: 4px 8px;
      border-radius: 3px;
      cursor: pointer;
    }

/* Nút mở AI */
#ai-support-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #28a745;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bold;
    z-index: 1000;
}
#ai-support-btn img {
    width: 30px;
    margin-right: 8px;
}

/* Khung chat */
#ai-chat-box {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 350px;
    height: 450px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    z-index: 1001;
}
#ai-chat-box.hidden {
    display: none;
}
.ai-header {
    background: #007bff;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
}
.ai-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
}
.ai-input {
    display: flex;
    border-top: 1px solid #ddd;
}
.ai-input input {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: 14px;
}
.ai-input button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

/* Tin nhắn */
.msg {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    max-width: 80%;
}
.msg.bot {
    background: #f1f1f1;
    align-self: flex-start;
}
.msg.user {
    background: #d1ecf1;
    align-self: flex-end;
}

#map {
            height: 90vh;
            width: 100%;
        }
        .map-container {
            display: flex;
        }
        .sidebar {
            width: 300px;
            background: #f0f0f0;
            padding: 10px;
            overflow-y: auto;
        }
        .map-content {
            flex: 1;
        }

/* Reset */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f0f2f5; /* nền xám nhẹ cho toàn trang */
}

/* Khung nội dung chính */
.content-wrapper {
  max-width: 1200px;
  margin: 20px auto; /* căn giữa */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* Bố cục trong khung */
#container {
  display: flex;
  height: 600px; /* thu nhỏ chiều cao như hình */
}
#sidebar {
  width: 300px;
  background: #f8f8f8;
  padding: 15px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  overflow-y: auto;
}
#sidebar h3 {
  margin-top: 0;
}
#sidebar input, #sidebar button {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box;
}
#sidebar button {
  background: #007acc;
  color: white;
  border: none;
  cursor: pointer;
  margin-bottom: 15px;
  border-radius: 4px;
}
#sidebar button:hover {
  background: #005fa3;
}
#sidebar .info {
  font-size: 14px;
  color: #333;
}

/* Map */
#map {
  flex: 1;
  position: relative;
}

/* Custom control box */
.map-control-box {
  background: white;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-size: 14px;
  line-height: 1.5;
}
.map-control-box b {
  display: block;
  margin-bottom: 5px;
  color: #003366;
}
.map-control-box hr {
  margin: 8px 0;
}

/* Toàn trang nền xám */
body {
  background: #f0f2f5;
}

/* Khung chính */
.content-wrapper {
  max-width: 1200px;
  margin: 20px auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* Container chứa sidebar + map */
#container {
  display: flex;
  height: 600px; /* thu nhỏ chiều cao */
}

/* Sidebar */
#sidebar {
  width: 250px;
  background: #f8f8f8;
  padding: 15px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  overflow-y: auto;
}

/* Map */
#map {
  flex: 1;
}

/* Khung chọn lớp bản đồ (control box) */
.map-control-box {
  background: white;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-size: 14px;
}

/* Đổi ngon ngữ */
#langBtn {
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

/* Container dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Nội dung dropdown ẩn mặc định */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9; 
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Link trong dropdown */
.dropdown-content a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
}

/* Hover đổi màu link */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Khi hover vào title, hiện dropdown */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Khung quầy */
.desk-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.desk-box {
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.desk-box:hover {
  transform: translateY(-4px);
}

/* Tiêu đề quầy */
.desk-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

/* Danh sách số trong quầy */
.desk-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.desk-box li {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  margin-bottom: 5px;
}

/* Màu theo trạng thái quầy */
.desk-box.quay-7 {
  background: #007bff; /* xanh dương */
}
.desk-box.quay-8 {
  background: #ff9800; /* cam */
}
.desk-box.quay-9 {
  background: #9e9e9e; /* xám */
}

/* ====== Trạng thái các quầy (cột giữa khi admin đăng nhập) ====== */
.desk-status {
  margin-top: 15px;
}

.desk-status h3 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}

.desk-card {
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.desk-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.desk-card .desk-name {
  font-size: 18px;
  margin-bottom: 8px;
}

.desk-card .queue-number {
  font-size: 22px;
  margin-bottom: 6px;
}

.desk-card .status {
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Màu sắc theo trạng thái */
.status-free {
  background: #75ee57;
}
.status-busy {
  background: #57b0fa;
}
.status-done {
  background: #14a1e7;
}

.status-section h4 {
  margin: 8px 0;
}

.status-section div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.queue-item {
  min-width: 90px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-weight: bold;
}

.queue-item.completed {
  background: #d4f8d4; /* xanh lá */
}

.queue-item.absent {
  background: #f8d4d4; /* đỏ nhạt */
  color: red;
  text-decoration: line-through;
}

.queue-item.calling {
  background: #ffe0b2; /* cam */
}

.queue-item.waiting {
  background: #e0e0e0; /* xám */
}

.action-btn {
  margin: 2px;
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.action-btn:hover {
  opacity: 0.8;
}

.queue-item{min-width:90px;padding:10px;text-align:center;border-radius:8px;font-weight:600}
.queue-item.completed{background:#d4f8d4}
.queue-item.absent{background:#f8d4d4;color:#c00;text-decoration:line-through}
.queue-item.calling{background:#ffe0b2}
.queue-item.waiting{background:#e0e0e0}
.action-btn{margin:2px;padding:4px 6px;border:none;border-radius:4px;cursor:pointer}
.action-btn:hover{opacity:.85}

.tree { list-style: none; padding-left: 0; margin: 0; }
.tree li { position: relative; padding: 6px 8px; cursor: pointer; user-select: none; }
.tree li .label { display: inline-block; }
.tree ul { list-style: none; padding-left: 18px; margin: 4px 0 0; display: none; }
.tree li.open > ul { display: block; }
.tree li.parent > .label::before {
  content: "▸"; display: inline-block; width: 1em; margin-right: 4px; transition: transform .15s;
}
.tree li.open > .label::before { transform: rotate(90deg); }
.tree li.leaf { cursor: default; }
.tree li.leaf > .label::before { content: "•"; transform: none; }

.schedule-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.schedule-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7ab9dcff;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  position: relative;
}

.schedule-title {
  margin: 0;
  font-size: 16px;
  text-align: center;
  flex: 1;
}

#fullscreenBtn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  right: 12px;
}

.schedule-wrapper {
  flex: 1;
  overflow-y: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #999;
  padding: 6px;
  font-size: 14px;
  vertical-align: top;
}

.schedule-table th {
  background: #5fb1ddff;
  color: #fff;
  text-align: center;
}

.week-title {
  text-align: center;
  font-weight: bold;
  background: #f2f2f2;
}

/* Xem toàn màn hình */
.schedule-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}

.schedule-header {
  display: flex;
  align-items: center;
  justify-content: center; /* căn giữa nội dung */
  background: #7ab9dcff;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  position: relative; /* để đặt nút fullscreen tuyệt đối */
}

.schedule-title {
  margin: 0;
  font-size: 16px;
  text-align: center;
  flex: 1; /* để chiếm đều khoảng trống */
}

#fullscreenBtn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  right: 12px; /* đặt sát bên phải */
}

.schedule-wrapper {
  max-height: 450px;
  overflow-y: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.schedule-table th, .schedule-table td {
  border: 1px solid #999;
  padding: 6px;
  font-size: 14px;
  vertical-align: top;
}

.schedule-table th {
  background: #5fb1ddff;
  color: #fff;
  text-align: center;
}

.week-title {
  text-align: center;
  font-weight: bold;
  background: #f2f2f2;
}

/* Khi ở fullscreen */
.schedule-container:fullscreen,
.schedule-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

.schedule-wrapper {
  flex: 1;
  overflow-y: hidden; /* bỏ scroll tay, để auto scroll */
}

/* Hướng dẫn*/
/* ========== HARD FIX CHO VĂN BẢN BỊ DỌC / BỊ CHIA CỘT ========== */
.guide-container, .guide-container *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;          /* bỏ break-all gây rớt từng chữ */
  overflow-wrap: break-word !important;
  column-count: initial !important;       /* huỷ multi-column nếu bị set */
  column-gap: normal !important;
}

/* Bố cục chuẩn lại cho vùng nội dung */
.guide-container{
  max-width: 1100px !important;
  margin: 28px auto 60px !important;
  padding: 0 20px !important;
}

/* ====== Thanh tiến trình 4 bước ====== */
.steps{
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 16px 0 8px !important;
  position: relative !important;
}
.steps::before{
  content:"" !important;
  position:absolute !important;
  top: 36px !important;
  left: 70px !important;
  right: 70px !important;
  height: 6px !important;
  background: #e8efd9 !important;
  border-radius: 99px !important;
  z-index:1 !important;
}
.step{ flex:1 1 0 !important; text-align:center !important; position:relative !important; z-index:2 !important; }
.step .circle{
  width:72px;height:72px;border-radius:50%;background:#7a9b45;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;
  margin:0 auto 8px !important;
}
.step p{ margin:0 !important; line-height:1.45 !important; }

/* ====== Các khối chi tiết ====== */
.detail{
  display:flex !important;
  align-items:flex-start !important;
  gap:18px !important;
  padding: 18px 0 !important;
  border-bottom:1px dashed #e9e9e9 !important;
}
.detail:last-of-type{ border-bottom:0 !important; }

.circle.small{
  width:48px;height:48px;border-radius:50%;background:#7a9b45;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
  flex-shrink:0 !important;
}
.detail .content{ flex:1 1 auto !important; }
.detail .content h3{ margin:0 0 8px !important; font-size:20px !important; }
.detail .content p, .detail .content ul{ margin:0 0 10px !important; line-height:1.6 !important; }
.detail video{ width:420px; max-width:100%; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.08); display:block; }

/* ====== Ghi chú & hr ====== */
.note{ text-align:center !important; color:#d97d1a !important; font-style:italic !important; margin:10px 0 !important; }
.guide-container hr{ border:0 !important; height:1px !important; background:#e6e6e6 !important; margin:14px 0 18px !important; }

/* ====== Responsive ====== */
@media (max-width: 720px){
  .steps{ flex-direction:column !important; gap:12px !important; }
  .steps::before{ display:none !important; }
  .step{ display:flex !important; align-items:center !important; gap:12px !important; text-align:left !important; }
  .detail{ gap:14px !important; }
  .circle.small{ width:42px;height:42px;font-size:16px; }
}

.guide-container h2 {
  text-align: center;      /* căn giữa ngang */
  font-size: 24px;         /* chữ to hơn một chút */
  font-weight: bold;
  color: #004080;          /* xanh đậm đồng bộ header */
  margin: 20px 0;          /* khoảng cách trên dưới */
}


/* Nút mở AI (góc trái) – bạn đã có, thêm nhẹ kích thước & z-index */
#ai-support-btn{
  position: fixed; bottom: 20px; left: 20px;
  background:#28a745; color:#fff; padding:10px 14px;
  border:0; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; gap:8px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  z-index: 1000;
}
#ai-support-btn img{ width:28px; height:28px; }

/* Lớp phủ mờ nền */
#ai-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter: blur(3px);                 /* trình duyệt mới: mờ nền thật */
  -webkit-backdrop-filter: blur(3px);
  z-index: 1100;
}
#ai-backdrop.hidden{ display:none; }

/* Hộp chat */
#ai-chat-box{
  position:fixed; right:24px; bottom:90px;
  width:540px; max-width:calc(100vw - 48px);
  height:560px; max-height:calc(100vh - 140px);
  background:#fff; border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  z-index: 1110;               /* cao hơn lớp phủ */
  overflow:hidden;
}
/* Ẩn/hiện */
#ai-chat-box.hidden{ display:none; }

/* Đầu hộp chat */
.ai-header{
  background:#0d6efd; color:#fff;
  padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
}
.ai-close{
  background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer;
}

/* Bong bóng có “đuôi” chỉ về nút */
#ai-chat-box::after{
  content:""; position:absolute; bottom:-18px; left:40px;
  width:0;height:0;border:18px solid transparent; border-top-color:#fff;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,.15));
}

/* Khu vực tin nhắn */
.ai-messages{ flex:1; padding:12px; overflow:auto; background:#f7f7f9; }
.msg{ background:#fff; border-radius:12px; padding:10px 12px; margin:8px 0; max-width:90%; }
.msg.bot{ background:#f1f5ff; }
.msg.user{ background:#d1ecf1; margin-left:auto; }

/* Ô nhập */
.ai-input{ display:flex; border-top:1px solid #eee; }
.ai-input input{ flex:1; padding:12px; border:0; outline:none; font-size:14px; }
.ai-input button{ padding:0 14px; border:0; background:#28a745; color:#fff; font-weight:700; cursor:pointer; }

/* Khi mở modal: khoá cuộn trang (tùy chọn) */
body.modal-open{ overflow:hidden; }

/* === Nút mở AI ở góc trái như hình === */
#ai-support-btn{
  position: fixed; bottom: 20px; left: 20px;
  background:#28a745; color:#fff; padding:10px 14px;
  border:0; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; gap:8px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  z-index: 1000;
}

/* === Backdrop làm mờ toàn màn hình === */
#ai-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  z-index: 1100;
}
#ai-backdrop.hidden{ display:none; }

/* === Hộp chat kiểu “bong bóng” lớn, bo tròn, viền xanh nhạt dày === */
#ai-chat-box{
  position: fixed;
  left: 58%;                 /* đặt hơi lệch sang phải như ảnh */
  top: 52%;
  transform: translate(-50%, -50%);
  width: 760px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 28px;
  border: 6px solid #9fc5e8;           /* viền xanh nhạt dày */
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  z-index: 1110;
  overflow: hidden;
}
#ai-chat-box.hidden{ display:none; }

/* Đuôi bong bóng chĩa về nút ở góc trái */
#ai-chat-box::after{
  content:"";
  position: absolute;
  left: 70px;                /* vị trí đuôi ở cạnh dưới, lệch trái */
  bottom: -38px;
  width: 0; height: 0;
  border: 38px solid transparent;
  border-top-color: #ffffff; /* phần trắng “ruột” */
  filter: drop-shadow(0 -2px 1px rgba(0,0,0,.08));
}
/* viền cho đuôi để đồng bộ với khung */
#ai-chat-box::before{
  content:"";
  position: absolute;
  left: 66px; bottom: -48px;
  width: 0; height: 0;
  border: 48px solid transparent;
  border-top-color: #9fc5e8; /* viền xanh nhạt */
  border-bottom: 0;
}

/* Header mảnh (ẩn nền đậm để giống khung trắng) */
.ai-header{
  background: transparent;
  color: #333;
  padding: 8px 14px 0;
  display:flex; justify-content: space-between; align-items:center;
}
.ai-close{ background:transparent; border:0; font-size:20px; cursor:pointer; }

/* Dòng chào hỏi góc phải (màu đỏ cam, chữ nhỏ) */
.ai-greeting{
  position: absolute;
  top: 18px;
  right: 28px;
  color: #d24527;            /* đỏ cam như ảnh */
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}

/* Khu vực tin nhắn: nền trắng, cuộn */
.ai-messages{
  flex: 1;
  margin: 8px 16px 0;
  padding: 10px 12px;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
}
.msg{ background:#fff; border-radius:12px; padding:10px 12px; margin:8px 0; max-width:95%; }
.msg.bot{ background:#f3f7ff; }
.msg.user{ background:#d1ecf1; margin-left:auto; }

/* Ô nhập bầu dục, nằm trong khung, có icon mic */
.ai-input{
  display:flex; align-items:center;
  gap: 8px;
  margin: 12px 20px 18px;
  padding: 6px;
  background: #fff;
  border: 2px solid #cfe2f3;
  border-radius: 999px;
}
.ai-input input{
  flex:1; border:0; outline:0; padding:10px 12px; font-size:14px;
}
.ai-input .ai-mic{
  border:0; background:transparent; font-size:18px; cursor:pointer; padding:6px 8px;
}
.ai-input #ai-send{
  border:0; background:#0d6efd; color:#fff; padding:10px 16px; border-radius:999px; font-weight:700; cursor:pointer;
}

/* Khoá cuộn khi mở */
body.modal-open{ overflow:hidden; }

/* Đáp ứng */
@media (max-width: 900px){
  #ai-chat-box{ width: 92vw; height: 70vh; left: 50%; top: 54%; }
  #ai-chat-box::after{ left: 40px; }
  #ai-chat-box::before{ left: 36px; }
}

.ai-close {
  background: transparent;
  border: none;
  color: #666;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}
.ai-close:hover {
  color: #d24527; /* đỏ cam khi hover */
}

.ai-red {
  color: #d80000;
  font-weight: bold;
}

nav .has-caret {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

nav .has-caret .caret {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Khi dropdown mở thì xoay mũi tên */
nav .dropdown.open .caret {
  transform: rotate(180deg);
}

nav .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  z-index: 10;
}

nav .dropdown.open .dropdown-content {
  display: block;
}

.print-menu{
  position: fixed; /* bám theo màn hình để không lệch vị trí */
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-width: 200px;
}
.print-menu.hidden{ display:none; }
.print-menu button{
  display:block; width:100%;
  padding:10px 12px; margin:6px 0;
  border:0; border-radius:6px; cursor:pointer;
  background:#004080; color:#fff; font-weight:700;
}
.print-menu button + button{ background:#28a745; }

/* Chỉ in #ticket */
@media print {
  body * { visibility: hidden !important; }
  #ticket, #ticket * { visibility: visible !important; }
  #ticket {
    position: absolute; left: 0; right: 0; top: 0; margin: 0 auto;
  }
}

.map-content { position: relative; }
#map { width: 100%; height: 90vh; }

/* Ảnh phủ lên map */
.overlay{
  position: absolute;
  inset: 0;          /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: contain;   /* đảm bảo không méo ảnh */
  background: #fff;      /* nền trắng sau ảnh, thay cho nền map */
  z-index: 5;
}
.hidden{ display: none !important; }

/* === Fullscreen cho lịch công tác === */
.schedule-container:fullscreen,
.schedule-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

/* Khi fullscreen, ẩn scrollbar để trình chiếu sạch hơn */
.schedule-container:fullscreen .schedule-wrapper,
.schedule-container:-webkit-full-screen .schedule-wrapper {
  overflow-y: hidden;
}

/* Tuỳ chọn: ẩn scrollbar cả khi không fullscreen */
.schedule-wrapper::-webkit-scrollbar { display: none; }
.schedule-wrapper { scrollbar-width: none; } /* Firefox */

.desk-section { margin-top: 20px; padding: 20px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.desks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.desk { border: 2px solid #ccc; padding: 10px; text-align: center; border-radius: 5px; }
.desk.calling { border-color: #ff9800; background: #ffe0b2; }
.desk.completed { border-color: #4caf50; background: #e8f5e9; }
.desk button { margin: 5px; padding: 5px 10px; cursor: pointer; }
.waiting-list { margin-top: 10px; }
.waiting-list button { background: #ddd; border: 1px solid #ccc; padding: 5px; margin-right: 5px; }


/* Ẩn <br> nếu HTML cũ có xuống dòng */
.queue-item br{ display: none !important; }

/* Số thứ tự: to & đậm hơn */
.queue-item .num,
.queue-item .number{
  font-weight: 800;
  font-size: 26px;      /* chỉnh 22–30 tuỳ ý */
  line-height: 1;
}

/* “Quầy …”: nhỏ hơn một chút */
.queue-item .desk,
.queue-item .quay{
  font-weight: 700;
  font-size: 14px;
  opacity: .95;
}

/* ==== KHUNG ĐEN PHÂN TÁCH 3 PHẦN ==== */
.status-section{
  border: 2px solid #000;        /* viền đen rõ ràng */
  border-radius: 10px;
  background: #fff;              /* nền trắng trong khung */
  padding: 10px 12px 12px;       /* khoảng đệm bên trong */
  margin: 14px 0 18px;           /* tách khoảng giữa các phần */
}

/* Tiêu đề phần (Đã hoàn thành / Đang gọi / Chờ gọi) */
.status-section h4{
  display: inline-block;
  margin: -6px 0 10px;           /* kéo tiêu đề sát viền trên */
  padding: 0 8px;                /* làm “nhãn” nằm trên viền */
  background: #fff;              /* che phần viền phía sau chữ */
  color: #000;
  font-weight: 700;
}

/* Lưới 3 cột (giữ như bạn yêu cầu) */
.status-section div{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Ô gọn & thấp để đỡ tốn diện tích */
.queue-item{
  display: grid;
  grid-template-columns: 1fr auto;  /* số bên trái – quầy bên phải */
  align-items: center;
  padding: 6px 12px;
  min-height: 46px;                 /* thấp hơn */
  border-radius: 12px;
  border: 1px solid #cfd8dc;
}
.queue-item br{ display: none !important; } /* tránh xuống dòng trong ô */
.queue-item .num,.queue-item .number{ font-size: 20px; font-weight: 800; line-height: 1; }
.queue-item .desk,.queue-item .quay{ font-size: 13px; font-weight: 700; white-space: nowrap; margin-left: 10px; }

/* Lưới 3 cột cho từng phần */
.status-section div{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Ô: 1 dòng, canh giữa */
.queue-item{
  display: flex !important;
  align-items: center !important;     /* giữa dọc */
  justify-content: center !important; /* giữa ngang */
  gap: 10px;
  padding: 6px 12px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #cfd8dc;
  white-space: nowrap;                 /* không xuống dòng */
  text-align: center;
}

/* Ẩn <br> cũ để dồn về 1 dòng */
.queue-item br{ display: none !important; }

/* Số thứ tự & “Quầy …” (sẽ được JS bọc span) */
.qi-num{  font-weight: 800 !important; font-size: 26px !important; line-height: 1; }
.qi-desk{ font-weight: 700 !important; font-size: 14px !important; opacity: .95; }

/* Tăng cỡ chữ "AI" trong liên kết GIẢI ĐÁP */
a[href="ai.php"] .ai-red{
  font-size: 1.3em;   /* chỉnh 1.3–2em tuỳ ý */
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  margin-right: 4px;  /* tạo khoảng cách với chữ "GIẢI ĐÁP" */

}
/* ========== THU NHỎ ẢNH PHỦ MAP & CĂN GIỮA ========== */
.map-content > .overlay,
#map .overlay {
  position: absolute !important;
  /* bỏ inset:0 của rule cũ */
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  width: auto !important;
  height: auto !important;
  max-width: 65% !important;   /* <= chỉnh 50–75% tuỳ mắt */
  max-height: 65% !important;

  object-fit: contain !important;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 5;
  /* nếu muốn không chặn thao tác map thì bật dòng dưới */
  /* pointer-events: none; */
}

/* Tuỳ chọn: mỗi loại ảnh 1 tỉ lệ riêng */
.overlay.qhchung     { max-width: 60% !important; }
.overlay.qhphankhu   { max-width: 55% !important; }
.overlay.qhvung      { max-width: 55% !important; }
.overlay.bandogiaithua{ max-width: 70% !important; }

@media (max-width: 900px){
  .map-content > .overlay,
  #map .overlay { max-width: 80% !important; max-height: 70% !important; }
}

/* Khung thông tin ngoài thửa */
.parcel-info{
  background:#fff;            /* dễ đọc, không che thửa vì đặt ngoài */
  border:1px solid #333;
  border-radius:6px;
  padding:6px 8px;
  font:12px/1.35 Arial, sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  pointer-events:none;        /* không chặn thao tác map */
}
.parcel-info h5{
  margin:0 0 4px; font-size:13px; font-weight:700;
}
.parcel-info .meta{ margin:0; }

/* Đường chỉ dẫn từ thửa → khung thông tin */
.parcel-leader{
  color:#666;                 /* màu đường nối */
  opacity:.9;
}

/* Khung chữ nhật: chỉ viền đen, không fill */
.parcel-rect{
  stroke:#000;
  stroke-width:2px;
  fill: none;                 /* nền trong suốt */
}

/* Nút fullscreen cho Leaflet */
.leaflet-control-fullscreen a{
  width: 34px; height: 34px; line-height: 34px;
  display: block; text-align: center;
  font-size: 18px; font-weight: 700;
  background: #fff; color: #333; text-decoration: none;
}
.leaflet-control-fullscreen a:hover{ background:#1976d2; color:#fff; }

/* Khi #map ở fullscreen, chiếm trọn màn hình */
#map:fullscreen, #map:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
}