:root {
  --bb-primary: #002060;
  --bb-primary-2: #00338D;
}




html, body {
  height: 100%;
  background: #fff;
}

/* Đẩy nội dung tránh “tai thỏ” và thanh home */
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Nếu header/footer fixed, nhớ bù thêm */
.header-fixed {
  padding-top: calc(56px + env(safe-area-inset-top)); /* 56px là ví dụ chiều cao header */
}
.footer-fixed {
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}







.bg-primary { background-color: var(--bb-primary) !important; }
.btn-primary, .text-bg-primary { background-color: var(--bb-primary) !important; border-color: var(--bb-primary) !important; }
a { text-underline-offset: 2px; }
.badge-dangerish { background:#fff0f0; color:#c1121f; border:1px solid #ffd6d6; }
.badge-ok { background:#eef8ff; color:#0b63b6; border:1px solid #d2ecff; }
.icon-grid button{width:3rem;height:3rem;font-size:1.25rem}

.form-label.fw-semibold{font-weight:600!important}
.icon-grid button{border:none!important} /* nếu còn dùng grid ở trang sửa */

.lesson-chip{border-radius:12px;padding:.4rem .6rem}

.timeline-item{border-radius:16px;border:1px solid #e9ecef;padding:12px 16px;background:#fff}
.timeline-alt{background:#f8f9fb}
.timeline-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1e66f5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.time-col{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
  .icon-grid .icon-item.active { outline:2px solid #0d6efd; }
  .color-grid .color-item.active { outline:2px solid #0d6efd; }
  .icon-btn, .color-btn { min-width:68px; }
  
  
    .row-schedule .btn-remove-row{ min-width:36px; }
    .icon-grid .icon-item.active{ outline:2px solid #0d6efd; }
    .color-grid .color-item.active{ outline:2px solid #0d6efd; }
    .icon-btn, .color-btn { min-width:68px; }
    .dropdown { overflow: visible; }
    .dropdown-menu { z-index: 2000; will-change: transform; }
  /* Nút emoji preset/recent */
  .emoji-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:10px; cursor:pointer;
    font-size:20px; line-height:1; background:#f8fafc; border:1px solid #e5e7eb;
  }
  .emoji-btn:hover{ background:#eef2ff; }

  /* Định vị picker nổi dưới nút */
  #emojiPicker{
    position:absolute; z-index:1055;
    width:min(320px, 90vw); max-height:60vh;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    border-radius:12px; overflow:hidden;
    background:#fff;
  }
  #emojiPicker.d-none{ display:none; }


/* ==== Emoji mini dropdown (giống Màu, không viền) ==== */
.emoji-menu{ min-width: 230px; }

.emoji-grid-large{
  display: grid;
  grid-template-columns: repeat(5, 36px);      /* 5 cột */
  grid-auto-rows: 36px;                        /* 6 hàng = 30 preset */
  gap: 6px;
}
.emoji-grid-recent{
  display: grid;
  grid-template-columns: repeat(5, 36px);      /* đúng 5 ô */
  grid-auto-rows: 36px;
  gap: 6px;
}
.emoji-item{
  width: 36px; height: 36px; line-height: 36px;
  text-align: center; font-size: 20px;
  background: transparent; border: none;       /* bỏ viền */
  padding: 0; cursor: pointer; border-radius: 6px;
}
.emoji-item:focus{ outline: none; box-shadow: none; }
.emoji-item:hover{ background: #f3f4f6; }      /* nhẹ, không viền */

.emoji-more-btn{
  display: block; width: 100%; height: 32px;
  background: transparent; border: none;       /* không viền */
  text-align: left; padding: 0 4px; cursor: pointer;
}
.emoji-more-btn:hover{ text-decoration: underline; }

/* popup picker đầy đủ */
#emojiPicker{
  position: fixed; z-index: 2000; width: 320px; max-width: 90vw;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
}

/* giữ style nút giống Màu */
.icon-btn{ min-width: 68px; }

/* Backdrop tối vừa mắt (phòng khi theme khác làm nhạt) */
.offcanvas-backdrop.show { opacity: .45; }

/* Nút nổi: tự định vị, không lệ thuộc wrapper/utility class */
#fabMenu{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50% !important;
  z-index: 1081; /* cao hơn mọi card/table/sticky header */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  padding: 0; line-height: 56px; font-size: 22px;
}

/* Tuỳ chọn: kéo cao/thấp nếu đè vào UI khác */
/* :root{ --fab-bottom: 24px; }  và thay bottom: var(--fab-bottom); nếu muốn */

/* Offcanvas đáy: cao theo nội dung, đẩy lên gần full khi dài */
#mobileQuickMenu.offcanvas-bottom{
  height: auto;                      /* bỏ cố định 30vh mặc định của Bootstrap */
  max-height: calc(100dvh - 56px);   /* chừa ~56px để còn nhìn thấy backdrop/top */
  overflow: hidden;                  /* tránh scrollbar cạnh phải của khung */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Phần thân chỉ cuộn khi thật sự vượt max-height */
#mobileQuickMenu .offcanvas-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header dính trên cùng khi nội dung dài */
#mobileQuickMenu .offcanvas-header{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* Backdrop hơi tối một chút cho đẹp */
.offcanvas-backdrop.show{ opacity: .45; }

/* ====== Anti-horizontal scroll (toàn cục, an toàn) ====== */
html, body { max-width: 100%; overflow-x: hidden; }

/* Bất kỳ cột/card nào cũng không được "đòi chỗ" khiến tràn ngang */
[class*="col-"], .col, .card { min-width: 0; }

/* Văn bản/tiêu đề dài trong card không làm tràn khung */
.card-title, .card-text, .list-group-item {
  overflow-wrap: anywhere;  /* phá dòng ở bất kỳ đâu nếu cần */
  word-break: break-word;   /* dự phòng cho browser cũ */
}

/* Ảnh/thumbnail an toàn bề ngang */
img { max-width: 100%; height: auto; display: block; }

/* Nếu có grid danh sách mà cha bị set width cứng, ép co đúng viewport */
.container, .container-fluid { width: 100%; }