:root {
  --color-bg: #1b1f27;
  --color-floor: #2a3040;
  --color-grid: rgba(255, 255, 255, 0.05);
  --color-room: #4a90d9;
  --color-report: #e6a23c;
  --color-notice: #67c23a;
  --color-company_info: #21a3a3;
  --color-regulations: #9b6bd8;
  --color-products: #e0629a;
  --color-birthdays: #e0c93e;
  --color-stats: #6b8fd8;
  --color-salary_policy: #e05c5c;
  --color-official_docs: #e05c5c;
  --color-panel-bg: #ffffff;
  --color-text: #1b1f27;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: #f0f2f5;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #12151b;
  flex-wrap: wrap;
}

.topbar-logo {
  height: 36px;
  width: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  cursor: pointer;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
}

.floor-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
}

.floor-btn {
  background: #2a3040;
  color: #f0f2f5;
  border: 1px solid #3a4257;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.floor-btn:hover {
  background: #3a4257;
}

.floor-btn.active {
  background: var(--color-room);
  border-color: var(--color-room);
}

.last-updated {
  margin-left: auto;
  font-size: 12px;
  color: #8a92a6;
}

.login-btn {
  background: #2a3040;
  color: #f0f2f5;
  border: 1px solid #3a4257;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
}

.login-btn:hover {
  background: #3a4257;
}

.weather-news-bar {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 8px 20px;
  background: #161a22;
  border-bottom: 1px solid #2a3040;
  font-size: 13px;
  color: #cfd4dc;
  flex-wrap: wrap;
}

/* Chỉ hiện ở tầng Bảng tin (renderBulletin trong main.js tạo phần tử này) */
.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.weather-widget,
.lunar-widget,
.market-bar {
  display: inline-block;
  padding: 6px 14px;
  background: #161a22;
  border-radius: 8px;
  font-size: 13px;
  color: #cfd4dc;
}

.lunar-widget:empty,
.market-bar:empty {
  display: none;
}

.dept-intro {
  flex: 1 1 300px;
  min-width: 0;
  padding-top: 2px;
  color: #cfd4dc;
}

/* ---- Tin ảnh nổi bật (rút ra từ các nguồn RSS theo chủ đề, ảnh + tiêu đề) ---- */
.featured-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.featured-news-card {
  display: flex;
  flex-direction: column;
  background: #12151b;
  border: 1px solid #2a3040;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.featured-news-img {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #1b1f27;
}

.featured-news-body {
  padding: 12px 16px;
}

.featured-news-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-report);
  margin-bottom: 6px;
}

.featured-news-body h4 {
  margin: 0;
  font-size: 15px;
  color: #f0f2f5;
  line-height: 1.4;
}

.featured-news-card:hover h4 {
  text-decoration: underline;
}

/* ---- Tin theo chủ đề (lưới khối nhỏ, mỗi khối 1 chuyên mục RSS) ---- */
.category-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.news-category-block {
  background: #12151b;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 14px 16px;
}

.news-category-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-report);
  border-bottom: 1px solid #2a3040;
  padding-bottom: 8px;
}

.news-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-category-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cfd4dc;
  text-decoration: none;
}

.news-category-list a:hover .news-category-title {
  color: #f0f2f5;
  text-decoration: underline;
}

.news-category-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #1b1f27;
}

.news-category-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.news-category-title {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

main {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
}

.stage-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
}

.next-floor-btn {
  /* fixed theo màn hình (không phải theo khung sơ đồ) để không bao giờ đè lên hotspot,
     dù hotspot nằm ở vị trí nào trong khung (toạ độ hotspot do Sheet quyết định, có thể đổi bất kỳ lúc nào) */
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 21, 27, 0.75);
  color: #f0f2f5;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.next-floor-btn:hover {
  background: var(--color-room);
  transform: scale(1.08);
}

.fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 21, 27, 0.6);
  color: #f0f2f5;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 4;
}

.fullscreen-btn:hover {
  background: rgba(18, 21, 27, 0.85);
  transform: scale(1.08);
}

.fullscreen-btn.is-unsupported {
  display: none;
}

/* Khi bấm toàn màn hình: bỏ giới hạn tỉ lệ/bo góc, cho ảnh phủ kín hẳn màn hình thật (wow hơn) */
.floor-stage:fullscreen,
.floor-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

.floor-stage {
  position: relative;
  width: 100%;
  /* Ti le khung theo DUNG kich thuoc anh cua tung tang (set rieng qua JS trong main.js)
     de anh khong bi keo meo — cac tang se cao thap khac nhau tuy anh, do la binh thuong. */
  aspect-ratio: 1200 / 580;
  background-color: var(--color-floor);
  background-image:
    repeating-linear-gradient(0deg, var(--color-grid) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--color-grid) 0 1px, transparent 1px 40px);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #3a4257;
  overflow: hidden;
}

/* Tầng "nội dung" (Bảng tin/Hall of Fame/Thư viện tài liệu) — không phải cảnh phòng làm việc,
   nên bỏ tỉ lệ khung cố định + hoa văn lưới, cho cao tự nhiên theo nội dung + cuộn nếu dài. */
/* Khong tu gioi han chieu cao/tu cuon rieng nua — de noi dung dai bao nhieu thi trang cao bay
   nhieu, cuon bang thanh cuon chung cua ca trang (o dau tren trang cung cuon duoc), tranh kieu
   "phai ren dung vao khung nho moi cuon duoc" gay kho chiu. */
.floor-stage.floor-stage--content {
  aspect-ratio: auto;
  background-image: none;
  padding: 20px;
}

.content-empty {
  padding: 24px;
}

/* ---- Bảng tin: 1 tin chính to (2x2) + 2 tin nhỏ ---- */
.bulletin-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(140px, auto));
  gap: 16px;
}

.bulletin-main-split {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Bo vien/nen cua khung ngoai — 2 nua ben trong se tu la 2 o rieng, tach nhau bang khoang gap */
.bulletin-card.bulletin-card--quote {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

.quote-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 16px;
  gap: 8px;
  min-height: 0;
  background: #12151b;
  border: 1px solid #2a3040;
  border-radius: 10px;
}

.quote-text {
  font-size: 14px;
  color: #f0f2f5;
  margin: 0;
}

.quote-author {
  font-size: 13px;
  color: #8a92a6;
  margin: 0;
}

.onthisday-label {
  align-self: stretch;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-report);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a3040;
  text-align: left;
}

.onthisday-widget {
  font-size: 13px;
  color: #cfd4dc;
  text-align: left;
}

.onthisday-text {
  display: block;
  margin: 0;
  color: #cfd4dc;
  text-decoration: none;
}

.onthisday-text:hover {
  text-decoration: underline;
}

.onthisday-source {
  color: #55607a;
  font-size: 11px;
}

.bulletin-small-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 352px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}

.bulletin-card {
  background: #12151b;
  border: 1px solid #2a3040;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bulletin-card:not(.bulletin-card--empty) {
  cursor: pointer;
}

.bulletin-card:not(.bulletin-card--empty):hover {
  border-color: #4a5568;
}

/* Tin nho: anh thumbnail vuong nho ben trai + tieu de ben canh (giong khoi tin theo chu de) */
.bulletin-card--small {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.bulletin-card--small .bulletin-card-img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
}

.bulletin-card--small .bulletin-card-img--placeholder {
  font-size: 22px;
}

.bulletin-card--small .bulletin-card-body {
  padding: 0;
  flex: 1;
  min-width: 0;
}

.bulletin-card--small .bulletin-card-body h3 {
  margin: 0;
  font-size: 14px;
}

.bulletin-card--empty {
  align-items: center;
  justify-content: center;
  color: #8a92a6;
  font-style: italic;
  padding: 20px;
}

.bulletin-card-img {
  flex: 1;
  min-height: 100px;
  display: flex;
  background-color: #1b1f27;
}

/* Ti le co dinh giong nhau moi kich thuoc man hinh (may tinh/dien thoai) — de CHI CAN 1 anh
   thumbnail duy nhat la vua khung o moi noi, khong can thiet ke rieng ban desktop/mobile nua. */
.bulletin-card--main .bulletin-card-img {
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* Nhieu anh (VD 2 anh) thi moi anh chiem deu 1 phan khung, canh nhau */
.bulletin-card-img-part {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.bulletin-card-img-part + .bulletin-card-img-part {
  border-left: 1px solid #2a3040;
}

/* Anh thumbnail rieng (ThumbnailDesktop/ThumbnailMobile) — do user tu thiet ke dung ti le khung,
   nen canh giua binh thuong la du, khong can neo len tren nhu anh poster cu (fallback). */
.bulletin-card-img-part--thumb {
  background-position: center;
}

.bulletin-card-img--placeholder {
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.bulletin-card-body {
  padding: 14px 16px;
}

.bulletin-card-body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #f0f2f5;
}

.bulletin-card--main .bulletin-card-body h3 {
  font-size: 20px;
}

/* Tieu de dai qua 1 dong -> chay chu ngang thay vi xuong dong lam vo chieu cao the */
/* Tinh, xuong dong binh thuong (khong chay chu nua) — giong format khoi tin theo chu de */
.bulletin-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bulletin-card-body p {
  margin: 0;
  font-size: 13px;
  color: #cfd4dc;
  line-height: 1.5;
}

/* ---- Hall of Fame ---- */
.hof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.hof-card {
  background: #12151b;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.hof-badge {
  font-size: 32px;
  margin-bottom: 8px;
}

.hof-card h3 {
  margin: 0 0 4px;
  color: #f0f2f5;
}

.hof-position {
  margin: 0 0 10px;
  font-size: 13px;
  color: #cfd4dc;
  font-weight: 400;
}

.hof-achievement {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-report);
  font-weight: 600;
  line-height: 1.5;
}

.hof-month {
  margin: 0;
  font-size: 12px;
  color: #8a92a6;
}

/* ---- Thư viện tài liệu (dùng chung, nhóm theo bộ phận) ---- */
.docs-library {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.docs-group h3 {
  margin: 0 0 8px;
  color: var(--color-room);
  font-size: 15px;
}

.docs-group .panel-list li {
  color: #cfd4dc;
  border-bottom-color: #2a3040;
}

/* ---- Panel "Trưởng bộ phận" ---- */
.dept-head-card {
  padding: 8px 0;
  border-bottom: 2px solid #ccc;
}

.dept-head-card:last-child {
  border-bottom: none;
}

.dept-head-card p {
  margin: 4px 0;
}

/* Overlay hotspot đè lên ảnh — không dùng nữa (đã chuyển hẳn sang hàng nút .hotspot-buttons
   bên dưới ảnh, áp dụng cho mọi kích thước màn hình, giống giao diện điện thoại). Giữ lại rule
   màu (.hotspot--TYPE) vì .hotspot-btn dùng chung để tô màu viền/nền theo loại. */
.hotspot {
  display: none;
  position: absolute;
  border-radius: 8px;
  border: 2px solid var(--hotspot-color, #55607a);
  background: color-mix(in srgb, var(--hotspot-color, #55607a) 12%, transparent);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.hotspot--room { --hotspot-color: var(--color-room); }
.hotspot--report { --hotspot-color: var(--color-report); }
.hotspot--notice { --hotspot-color: var(--color-notice); }
.hotspot--company_info { --hotspot-color: var(--color-company_info); }
.hotspot--regulations { --hotspot-color: var(--color-regulations); }
.hotspot--products { --hotspot-color: var(--color-products); }
.hotspot--birthdays { --hotspot-color: var(--color-birthdays); }
.hotspot--stats { --hotspot-color: var(--color-stats); }
.hotspot--salary_policy { --hotspot-color: var(--color-salary_policy); }
.hotspot--official_docs { --hotspot-color: var(--color-official_docs); }

.hotspot.is-protected {
  border-style: dashed;
}

.hotspot.is-protected .hotspot-label::before {
  content: "🔒 ";
}

.hotspot-label {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(18, 21, 27, 0.55);
  color: #f0f2f5;
  pointer-events: none;
  white-space: nowrap;
}

.hotspot:hover {
  background: color-mix(in srgb, var(--hotspot-color, #55607a) 22%, transparent);
  transform: translateY(-1px);
}

.hotspot:hover,
.hotspot.is-active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hotspot-color, #55607a) 45%, transparent), 0 0 16px color-mix(in srgb, var(--hotspot-color, #55607a) 55%, transparent);
}

/* Hàng nút hotspot nằm dưới ảnh — áp dụng cho mọi màn hình (desktop lẫn điện thoại) */
.hotspot-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.hotspot-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--hotspot-color, #55607a);
  background: color-mix(in srgb, var(--hotspot-color, #55607a) 20%, #12151b);
  color: #f0f2f5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hotspot-btn:active {
  background: color-mix(in srgb, var(--hotspot-color, #55607a) 35%, #12151b);
}

.info-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 100%);
  background: var(--color-panel-bg);
  color: var(--color-text);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  padding: 24px;
  overflow-y: auto;
  z-index: 20;
}

.info-panel.open {
  transform: translateX(0);
}

.panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

#panel-title {
  margin: 8px 32px 4px 0;
  font-size: 20px;
}

.panel-desc {
  color: #555;
  font-size: 14px;
  margin-bottom: 16px;
}

.panel-notice-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}

.panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel-list li {
  padding: 8px 0;
  border-bottom: 2px solid #ccc;
}

.panel-list a,
.panel-desc a {
  color: var(--color-report);
  font-weight: 600;
  text-decoration: none;
}

.panel-list a:hover,
.panel-desc a:hover {
  text-decoration: underline;
}

.panel-list li p {
  margin: 4px 0 0;
}

.panel-muted {
  color: #888;
  font-size: 12px;
}

.panel-empty {
  color: #888;
  font-style: italic;
}

.panel-locked {
  color: #a33;
  font-weight: 600;
}


/* ---- Modal (đăng nhập / đổi mật khẩu bắt buộc) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  background: var(--color-panel-bg);
  color: var(--color-text);
  border-radius: 10px;
  padding: 28px;
  width: min(360px, 90vw);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.modal h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.modal-note {
  font-size: 12px;
  color: #888;
  margin: 0 0 16px;
}

.modal form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal label {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.modal-submit {
  padding: 9px 14px;
  border: none;
  border-radius: 6px;
  background: var(--color-room);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.modal-submit:hover {
  filter: brightness(1.08);
}

.form-error {
  color: #c0392b;
  font-size: 12px;
  margin: 0;
  min-height: 14px;
}

@media (max-width: 480px) {
  .topbar h1 {
    font-size: 15px;
  }
  .hotspot-label {
    font-size: 11px;
  }
}

/* Điện thoại: ảnh cảnh chiếm gần hết màn hình, bỏ khung/nhãn đè lên ảnh,
   chuyển sang hàng nút bấm nằm dưới ảnh (dễ bấm hơn overlay nhỏ trên ảnh). */
@media (max-width: 640px) {
  main {
    padding: 10px 6px 100px;
  }

  .stage-wrapper {
    max-width: 100%;
  }

  .weather-news-bar {
    flex-direction: column;
    gap: 6px;
  }

  /* Gop 3 khung thoi tiet/lich am/ty gia thanh 1 dong cuon ngang, khong xep chong 3 dong nua */
  .info-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .weather-widget,
  .lunar-widget,
  .market-bar {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dept-intro {
    flex-basis: auto;
    width: 100%;
  }

  .bulletin-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .bulletin-main-split {
    grid-template-columns: 1fr;
  }

  .bulletin-small-list {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
  }

  .hof-grid {
    grid-template-columns: 1fr;
  }
}