/* ==============================================================================
   BASE LAYOUT CSS - SƠ ĐỒ PHÒNG THI KIẾN TRÚC THEO TỈ LỆ 16:9 (1680 x 945 PX)
   Tái hiện 100% cột trụ kem 3D có bóng đổ dọc, dầm phân tầng 3 lớp nhô cánh gà,
   dải đổ bóng kiến trúc rọi xuống tầng dưới, cửa sổ & ô số phòng viền xanh sắc nét.
   ============================================================================== */

/* 1. Khung sơ đồ tỷ lệ chuẩn 16:9 (1680 x 945) */
#diagram-container {
  --proctor-font-size: 26px;
  width: 1680px;
  height: 945px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  user-select: none;
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  box-sizing: border-box;
  background-color: #f0f4f8;
}

#diagram-container * {
  box-sizing: border-box;
}

/* ==============================================================================
   2. BẦU TRỜ & MÂY HOẠT HỌA BAY BỒNG BỀNH (ANIME PARALLAX SKY)
   ============================================================================== */
.sky-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 874px;
  background: var(--sky-gradient, linear-gradient(180deg, #2b93f7 0%, #68bafc 52%, #cde8ff 100%));
  overflow: hidden;
  z-index: 1;
}

@keyframes driftCloudsSlow {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(2100px, 0, 0); }
}

@keyframes driftCloudsFast {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(2100px, 0, 0); }
}

.cloud-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cloud-track-slow {
  animation: driftCloudsSlow 135s linear infinite;
  will-change: transform;
}

.cloud-track-fast {
  animation: driftCloudsFast 85s linear infinite;
  will-change: transform;
}

/* --- CÁC CỤM MÂY TỪ SPRITE SHEET CLOUDS.PNG TRỰC TIẾP --- */
.cloud-slot {
  position: absolute;
  pointer-events: none;
  transform-origin: top left;
}

.cloud-sprite {
  background-image: url('images/clouds.png');
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: var(--cloud-opacity, 0.92);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

.cloud-sprite-0  { width: 322px; height: 180px; background-position: -36px -57px; }
.cloud-sprite-1  { width: 333px; height: 197px; background-position: -420px -50px; }
.cloud-sprite-2  { width: 338px; height: 147px; background-position: -799px -77px; }
.cloud-sprite-3  { width: 314px; height: 217px; background-position: -1187px -35px; }
.cloud-sprite-4  { width: 355px; height: 115px; background-position: -25px -331px; }
.cloud-sprite-5  { width: 342px; height: 172px; background-position: -420px -306px; }
.cloud-sprite-6  { width: 332px; height: 183px; background-position: -806px -294px; }
.cloud-sprite-7  { width: 319px; height: 173px; background-position: -1184px -306px; }
.cloud-sprite-8  { width: 300px; height: 191px; background-position: -41px -527px; }
.cloud-sprite-9  { width: 348px; height: 136px; background-position: -419px -568px; }
.cloud-sprite-10 { width: 319px; height: 195px; background-position: -817px -528px; }
.cloud-sprite-11 { width: 333px; height: 171px; background-position: -1177px -546px; }
.cloud-sprite-12 { width: 326px; height: 178px; background-position: -40px -778px; }
.cloud-sprite-13 { width: 344px; height: 204px; background-position: -417px -770px; }
.cloud-sprite-14 { width: 341px; height: 131px; background-position: -804px -811px; }
.cloud-sprite-15 { width: 315px; height: 179px; background-position: -1187px -781px; }

/* ==============================================================================
   3. TẦNG CÂY CẢNH HẬU CẢNH TỰ NHIÊN (SPRITE SHEET: TREES.PNG)
   - Tầng hậu cảnh z-index = 2 nằm sau tòa nhà (z-index = 6).
   - Tán cây phân tầng đa lớp (background, midground, foreground bushes) tạo chiều sâu 3D.
   - Thân cây và cành lá đan xen tự nhiên qua khoảng sân trung tâm (gap 73px) giữa Toà A và Toà B.
   - Hỗ trợ cả 2 chế độ: 2 dãy nhà (dual-mode) và 1 dãy nhà (single-mode).
   ============================================================================== */
.trees-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 874px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.tree-slot {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
  will-change: transform;
}

.tree-sprite {
  background-image: url('images/trees.png');
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Định nghĩa 12 cụm cây từ sprite sheet trees.png (1572 x 1254 px) */
.tree-sprite-0  { width: 313px; height: 368px; background-position: -35px -17px; }
.tree-sprite-1  { width: 272px; height: 382px; background-position: -452px -3px; }
.tree-sprite-2  { width: 345px; height: 373px; background-position: -811px -11px; }
.tree-sprite-3  { width: 325px; height: 367px; background-position: -1217px -19px; }
.tree-sprite-4  { width: 253px; height: 300px; background-position: -66px -508px; }
.tree-sprite-5  { width: 258px; height: 310px; background-position: -459px -498px; }
.tree-sprite-6  { width: 289px; height: 279px; background-position: -839px -529px; }
.tree-sprite-7  { width: 321px; height: 230px; background-position: -1220px -578px; }
.tree-sprite-8  { width: 313px; height: 174px; background-position: -35px -1056px; }
.tree-sprite-9  { width: 331px; height: 133px; background-position: -422px -1097px; }
.tree-sprite-10 { width: 282px; height: 174px; background-position: -843px -1056px; }
.tree-sprite-11 { width: 322px; height: 117px; background-position: -1219px -1113px; }

/* ------------------------------------------------------------------------------
   3.1 CỤM CÂY CHẾ ĐỘ 2 DÃY NHÀ (DUAL MODE)
   ------------------------------------------------------------------------------ */
/* Mạn trái Toà A (Left Flank) */
.tree-left-bg {
  left: -95px;
  top: 310px;
  transform: scale(1.36);
  transform-origin: top left;
  z-index: 1;
  opacity: 0.96;
}

.tree-left-mid {
  left: -65px;
  top: 480px;
  transform: scale(1.22);
  transform-origin: top left;
  z-index: 2;
}

.tree-left-bush {
  left: -25px;
  top: 720px;
  transform: scale(0.66);
  transform-origin: top left;
  z-index: 3;
}

/* Khoảng sân trung tâm giữa Toà A và Toà B (Center Courtyard Alley, X = 805px..878px) */
.tree-center-bg {
  left: 626px;
  top: 290px;
  transform: scale(1.38);
  transform-origin: top left;
  z-index: 1;
  opacity: 0.95;
}

.tree-center-mid {
  left: 656px;
  top: 450px;
  transform: scale(1.14);
  transform-origin: top left;
  z-index: 2;
}

.tree-center-shrub {
  left: 781px;
  top: 795px;
  transform: scale(0.43);
  transform-origin: top left;
  z-index: 3;
}

/* Mạn phải Toà B (Right Flank) */
.tree-right-bg {
  right: -115px;
  top: 310px;
  transform: scaleX(-1) scale(1.39);
  transform-origin: top right;
  z-index: 1;
  opacity: 0.96;
}

.tree-right-mid {
  right: -75px;
  top: 490px;
  transform: scale(1.28);
  transform-origin: top right;
  z-index: 2;
}

.tree-right-bush {
  right: -20px;
  top: 730px;
  transform: scale(0.77);
  transform-origin: top right;
  z-index: 3;
}

/* ------------------------------------------------------------------------------
   3.2 CỤM CÂY CHẾ ĐỘ 1 DÃY NHÀ (SINGLE MODE)
   ------------------------------------------------------------------------------ */
.tree-single-bg-1 {
  left: -40px;
  top: 320px;
  transform: scale(1.34);
  transform-origin: top left;
  z-index: 1;
  opacity: 0.95;
}

.tree-single-flank-1 {
  left: 55px;
  top: 410px;
  width: 390px;
  transform: scale(1.13);
  transform-origin: top left;
  z-index: 2;
}

.tree-single-mid-1 {
  left: 110px;
  top: 510px;
  transform: scale(1.08);
  transform-origin: top left;
  z-index: 3;
}

.tree-single-bush-1 {
  left: 15px;
  top: 715px;
  transform: scale(0.68);
  transform-origin: top left;
  z-index: 4;
}

.tree-single-bg-2 {
  right: -40px;
  top: 320px;
  transform: scaleX(-1) scale(1.35);
  transform-origin: top right;
  z-index: 1;
  opacity: 0.95;
}

.tree-single-flank-2 {
  right: 65px;
  top: 400px;
  transform: scale(1.18);
  transform-origin: top right;
  z-index: 2;
}

.tree-single-mid-2 {
  right: 110px;
  top: 510px;
  transform: scale(1.11);
  transform-origin: top right;
  z-index: 3;
}

.tree-single-bush-2 {
  right: 15px;
  top: 725px;
  transform: scale(0.83);
  transform-origin: top right;
  z-index: 4;
}

/* ==============================================================================
   4. TIÊU ĐỀ TRƯỜNG & KỲ THI (HTML TYPOGRAPHY TRỰC TIẾP)
   ============================================================================== */
.diagram-title-group {
  position: absolute;
  top: 22px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 30;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1.25;
}

.title-line {
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--title-fill, #d32f2f);
  -webkit-text-stroke: 2px var(--title-stroke, #ffffff);
  paint-order: stroke fill;
  text-shadow: 0 0 2px var(--title-stroke, #ffffff);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.38));
  user-select: none;
  cursor: pointer;
}

.title-line-1 {
  font-size: var(--title-size, 40px);
}

.title-line-2 {
  font-size: var(--title-size, 40px);
  margin-top: 2px;
}

/* ==============================================================================
   5. BỐ CỤC TÒA NHÀ KIẾN TRÚC CHUẨN TỈ LỆ 16:9 (1680 x 945)
   - Toà A: Tường X = 43px -> 805px (rộng 762px)
   - Khe giữa: X = 805px -> 878px (rộng 73px)
   - Toà B: Tường X = 878px -> 1637px (rộng 759px), Lề phải đối xứng 43px
   ============================================================================== */
.buildings-container {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 734px;
  z-index: 6;
  pointer-events: none;
}

.buildings-container * {
  pointer-events: auto;
}

.building-card {
  position: absolute;
  top: 24px; /* Đỉnh mái ngói tại Y = 164px */
  height: 710px;
  display: flex;
  flex-direction: column;
}

.dual-layout .building-a {
  left: 43px;
  width: 762px;
}

.dual-layout .building-b {
  left: 878px;
  width: 759px;
}

.single-layout .building-card {
  left: 290px;
  width: 1100px;
}

/* ------------------------------------------------------------------------------
   5.1 MÁI NHÀ NGÓI DỐC, PHÀO CHỈ CORNICE VÀ BIỂN HIỆU A/B
   ------------------------------------------------------------------------------ */
.building-roof-wrapper {
  position: relative;
  width: calc(100% + 28px);
  margin-left: -14px;
  height: 66px;
  z-index: 15;
}

.building-roof {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 47px;
  background: 
    repeating-linear-gradient(90deg, 
      rgba(255, 255, 255, 0.12) 0px, 
      rgba(255, 255, 255, 0.12) 13px, 
      rgba(0, 0, 0, 0.22) 14px, 
      rgba(0, 0, 0, 0.22) 15px),
    var(--roof-bg, linear-gradient(180deg, #f56841 0%, #f67141 35%, #d8502c 75%, #a83618 100%));
  clip-path: polygon(0% 100%, 28px 0%, calc(100% - 28px) 0%, 100% 100%);
  border-bottom: 3.5px solid var(--roof-accent, #ffb300);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Dầm mái Cornice màu kem ngà nhô cánh gà 14px */
.building-roof-cornice {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: var(--cornice-bg, linear-gradient(180deg, #fff8e2 0%, #fee4b6 55%, #f4ca88 100%));
  border-top: 2px solid #ffffff;
  border-bottom: 2.5px solid var(--cornice-border, #7e3206);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.32);
  border-radius: 2px;
}

/* Dải bóng đổ dưới dầm mái Cornice rọi xuống đỉnh tầng 3 */
.cornice-cast-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  background: var(--cornice-shadow, linear-gradient(180deg, rgba(130, 55, 12, 0.65) 0%, rgba(165, 80, 22, 0.32) 45%, rgba(200, 115, 35, 0.1) 80%, transparent 100%));
  z-index: 8;
  pointer-events: none;
}

.building-sign-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 66px;
  background: var(--sign-border, #f59e0b);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  z-index: 20;
}

.sign-badge-inner {
  width: 100%;
  height: 100%;
  background: var(--sign-bg, linear-gradient(180deg, #0e4da7 0%, #0a3a8a 100%));
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.sign-letter {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 900;
  font-size: 48px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  line-height: 1;
}

/* ------------------------------------------------------------------------------
   5.2 THÂN TƯỜNG (FACADE) VÀ HỆ CỘT TRỤ 3D PHÂN GIAN PHÒNG
   ------------------------------------------------------------------------------ */
.building-facade {
  position: relative;
  width: 100%;
  flex: 1;
  background: var(--wall-bg, #f4caa0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Khối một tầng: CSS Grid 11 cột chuẩn xác, cột giữa 16px thanh thoát */
.floor-section {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 28px;
  padding: 0;
  align-items: stretch;
  background: var(--wall-bg, #fde8bf);
}

/* Dải đổ bóng ngang dưới dầm rọi xuống tường và đỉnh cột của mỗi tầng */
.floor-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  background: var(--beam-cast-shadow, linear-gradient(180deg, rgba(130, 68, 20, 0.72) 0%, rgba(160, 95, 35, 0.42) 35%, rgba(190, 130, 60, 0.16) 70%, transparent 100%));
  z-index: 8;
  pointer-events: none;
}

.floor-tag {
  position: absolute;
  left: -14px;
  top: 6px;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: var(--floor-label-color, #5d4037);
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 12;
}

/* Cột giữa: Rộng 16px, viền sắc nét, đổ bóng cả 2 bên đậm có độ nhòe mềm mại */
.facade-pillar {
  width: 16px;
  margin: 0 auto;
  height: 100%;
  background: var(--pillar-bg, #feecc6);
  border-left: 1px solid var(--pillar-border-l, #d4a36e);
  border-right: 1px solid var(--pillar-border-r, #a8642a);
  box-shadow: 2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75)), -2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75));
  position: relative;
  z-index: 5;
}

.facade-pillar-left,
.facade-pillar-right {
  border-left: 1px solid var(--pillar-border-l, #d4a36e);
  border-right: 1px solid var(--pillar-border-r, #a8642a);
  box-shadow: 2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75)), -2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75));
}

/* Cột góc trái ngoài cùng: Viền sắc nét, đổ bóng cả 2 bên đậm có độ nhòe */
.facade-pillar-corner-left,
.facade-pillar-corner:not(.facade-pillar-corner-right) {
  width: 28px;
  height: 100%;
  background: var(--corner-pillar-bg, #fcb366);
  border-left: 3.5px solid var(--corner-pillar-border, #b84a08);
  border-right: 1.5px solid var(--corner-pillar-shadow, #a8480a);
  box-shadow: 2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75)), -2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75));
  position: relative;
  z-index: 5;
}

/* Cột góc phải ngoài cùng: Viền sắc nét, đổ bóng cả 2 bên đậm có độ nhòe */
.facade-pillar-corner-right {
  width: 28px;
  height: 100%;
  background: var(--corner-pillar-bg-r, #fcb366);
  border-right: 3.5px solid var(--corner-pillar-border, #b84a08);
  border-left: 1.5px solid var(--corner-pillar-shadow, #a8480a);
  box-shadow: 2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75)), -2px 0 4px var(--pillar-shadow, rgba(130, 45, 10, 0.75));
  position: relative;
  z-index: 5;
}

/* Hốc gian phòng (Room Bay): Màu kem nhạt phẳng, đón bóng đổ dầm rọi xuống */
.room-bay {
  display: flex;
  flex-direction: column;
  padding: 14px 4px 6px 4px;
  min-width: 0;
  position: relative;
  z-index: 3;
  background: var(--bay-bg, #fde8bf);
}

/* Biển số phòng: Nền trắng, viền mảnh 1.5px rõ ràng, không đổ bóng, font to */
.room-header {
  height: 30px;
  background: var(--room-header-bg, #ffffff);
  color: var(--room-header-text, #0b3c8c);
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.5px;
  border-radius: 4px;
  border: 1.5px solid var(--room-border, #03369a);
  box-shadow: none;
}

/* Khoảng tường hốc phòng giữa biển phòng và cửa sổ */
.room-wall-gap {
  height: 12px;
  width: 100%;
}

/* Cửa sổ phòng thi: Kính trắng sáng, viền mảnh 1.5px rõ ràng, không đổ bóng */
.room-body {
  height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 2px;
  position: relative;
  background: var(--window-bg, #ffffff);
  border: 1.5px solid var(--room-border, #03369a);
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
}

.room-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--glass-reflect, rgba(227, 242, 253, 0.55)) 0%, transparent 60%);
  pointer-events: none;
}

.single-teacher {
  gap: 1px;
}

.teacher-name {
  font-weight: bold;
  font-size: var(--proctor-font-size, 26px);
  color: var(--teacher-name-color, #b71c1c);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -0.3px;
  padding: 0 1px;
}

.teacher-subject {
  font-weight: normal;
  font-size: calc(var(--proctor-font-size, 26px) - 4px);
  color: var(--teacher-sub-color, #37474f);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dual-teacher {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.dual-teacher .teacher-name {
  font-size: calc(var(--proctor-font-size, 26px) * 0.77);
}

.dual-teacher .teacher-subject {
  font-size: calc(var(--proctor-font-size, 26px) * 0.65);
}

.dual-divider {
  width: 90%;
  height: 1px;
  border-top: 1px dashed var(--room-border, #90caf9);
  opacity: 0.6;
  margin: 1px 0;
}

/* ------------------------------------------------------------------------------
   5.3 HỆ DẦM PHÂN TẦNG 3 LỚP CHUẨN KIẾN TRÚC BG1
   - Gờ phào trên có rãnh chỉ âm phân cách
   - Thân dầm màu cam kiến trúc mịn
   - Gờ phào dưới có mép bóng đổ đậm
   ------------------------------------------------------------------------------ */
.floor-beam-wrapper {
  position: relative;
  width: calc(100% + 16px);
  margin-left: -8px;
  z-index: 10;
}

.floor-beam {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}

/* 1. Gờ phào trên nhô ra - Màu phẳng không gradient */
.beam-ledge-top {
  height: 7px;
  width: 100%;
  background: var(--beam-ledge-top, #fee09a);
  border-top: 1.5px solid #ffffff;
  position: relative;
}

.beam-ledge-top-groove {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: var(--beam-groove, #9b3f13);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* 2. Thân dầm cam - Màu phẳng thuần túy không chuyển màu, nhạt chuẩn BG1 */
.beam-channel-middle {
  height: 42px;
  background: var(--beam-bg, #fcb268);
  position: relative;
  display: flex;
  align-items: center;
  border-left: 2.5px solid #fee09a;
  border-right: 2.5px solid #814414;
}

/* 3. Gờ phào dưới nhô ra - Màu phẳng không gradient */
.beam-ledge-bottom {
  height: 7px;
  width: 100%;
  background: var(--beam-ledge-bottom, #fde2a0);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2.5px solid var(--beam-bottom-border, #814414);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
}

/* Khung ray hành lang căn chuẩn 100% theo bề ngang thân tòa nhà */
.corridor-track {
  width: calc(100% - 16px);
  margin: 0 8px;
  height: 100%;
  position: relative;
}

/* Box riêng cho Giám thị Hành lang (HL) bao vừa đúng các phòng tương ứng */
.corridor-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--corridor-box-bg, rgba(255, 255, 255, 0.94));
  border: 1.5px solid var(--corridor-box-border, #d48a38);
  border-radius: 5px;
  height: calc(100% - 4px);
  min-width: max-content;
  padding: 0 10px;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  z-index: 15;
}

.corridor-box-label {
  background: var(--corridor-badge-bg, #03369a);
  color: var(--corridor-badge-text, #ffffff);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 800;
  font-size: calc(var(--proctor-font-size) * 0.65);
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.corridor-box-teacher {
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: var(--proctor-font-size, 26px);
  font-weight: bold;
  color: var(--teacher-name-color, #b71c1c);
  line-height: 1;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.corridor-box-teacher .teacher-sub {
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: calc(var(--proctor-font-size, 26px) - 4px);
  font-weight: normal;
  color: var(--teacher-sub-color, #37474f);
  line-height: 1;
}

/* ------------------------------------------------------------------------------
   5.4 CHÂN TƯỜNG DẦM ĐÁY TOÀ NHÀ (CORRIDOR BEAM FLOOR 1)
   ------------------------------------------------------------------------------ */
.building-base-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.building-base-beam {
  position: relative;
  width: calc(100% + 16px);
  margin-left: -8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}

.building-base-beam .beam-channel-middle {
  height: 46px;
}

/* ==============================================================================
   6. PHẦN MÓNG TOÀ NHÀ & HÀNG RÀO CÂY XANH CHÂN MÓNG (FOUNDATION & PLINTH LAYER)
   - Thay thế ground-layer cũ, ăn khớp chuẩn xác dưới dầm đáy toà nhà (Y = 870px..945px)
   - Khối móng toà nhà (.foundation-block) tạo bệ đỡ kiến trúc 3D vững chắc
   - Hàng rào cây xanh (.building-base-hedge) được đưa xuống mọc sát chân móng
   - Bảng phân công hội đồng thi (.extra-tasks-badge) hiển thị nổi bật đè lên hàng rào cây
   ============================================================================== */
.foundation-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: var(--road-gradient, linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%));
  border-top: 2px solid var(--curb-color, #94a3b8);
  pointer-events: none;
  z-index: 18;
  overflow: visible;
}

.foundation-layer * {
  pointer-events: auto;
}

.foundation-ground-curb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
}

.foundation-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Khối móng toà nhà ăn khớp chuẩn xác theo toạ độ toà nhà */
.foundation-block {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

/* Dual mode: Toà A dầm rộng 790px (X: 25px..815px), Toà B dầm rộng 787px (X: 860px..1647px) */
.dual-layout .foundation-a {
  left: 25px;
  width: 790px;
}

.dual-layout .foundation-b {
  left: 860px;
  width: 787px;
}

/* Single mode: Toà nhà căn giữa (X: 272px..1400px, rộng 1128px) */
.single-layout .foundation-single {
  left: 272px;
  width: 1128px;
}

/* Kiến trúc móng đá Plinth chịu lực */
.foundation-plinth {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--plinth-bg, linear-gradient(180deg, #ded6cb 0%, #c9bfae 100%));
  border-left: 2px solid var(--plinth-border, #8d7e6f);
  border-right: 2px solid var(--plinth-border, #8d7e6f);
  border-bottom: 2px solid var(--plinth-border, #8d7e6f);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

/* Gờ đá viền trên cùng của móng (tiếp giáp dầm đáy toà nhà) */
.plinth-ledge-top {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.plinth-body {
  flex-grow: 1;
  background: 
    repeating-linear-gradient(90deg, 
      transparent 0px, 
      transparent 150px, 
      rgba(0, 0, 0, 0.08) 151px, 
      rgba(255, 255, 255, 0.15) 152px),
    var(--plinth-bg, linear-gradient(180deg, #ded6cb 0%, #c9bfae 100%));
}

/* Hàng rào cây xanh được chuyển xuống mọc sát chân móng toà nhà */
.building-base-hedge {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  overflow: visible; /* Không xén ngọn hay mép cây */
  pointer-events: none;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hedge-bush {
  position: relative;
  pointer-events: none;
  flex-shrink: 0;
  margin-right: -15px; /* Đan xen lớp trước sau tự nhiên */
}

.hedge-bush:last-child {
  margin-right: 0;
}

.hedge-bush .tree-sprite {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Các loại bụi cây thu nhỏ (sprites 9, 11, 8, 10, 7) từ trees.png */
.hedge-b1 {
  width: 96px;
  height: 46px;
}
.hedge-b1 .tree-sprite {
  transform: scale(0.63);
  transform-origin: bottom left;
}

.hedge-b2 {
  width: 96px;
  height: 42px;
}
.hedge-b2 .tree-sprite {
  transform: scale(0.64);
  transform-origin: bottom left;
}

.hedge-b3 {
  width: 72px;
  height: 47px;
}
.hedge-b3 .tree-sprite {
  transform: scale(0.48);
  transform-origin: bottom left;
}

.hedge-b4 {
  width: 65px;
  height: 47px;
}
.hedge-b4 .tree-sprite {
  transform: scale(0.48);
  transform-origin: bottom left;
}

.hedge-b5 {
  width: 58px;
  height: 48px;
}
.hedge-b5 .tree-sprite {
  transform: scale(0.38);
  transform-origin: bottom left;
}

/* Lật gương ngẫu nhiên để các bụi cạnh nhau không bị lặp */
.hedge-flip {
  transform: scaleX(-1);
}

/* Bảng phân công hội đồng thi hiển thị nổi bật đè lên hàng rào cây xanh */
.extra-tasks-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35; /* Đè lên hẳn hàng rào cây xanh (z-index: 20) */
  display: inline-flex;
  align-items: center;
  background: var(--extra-bg, rgba(255, 255, 255, 0.98));
  border: 2.5px solid var(--extra-border, #b71c1c);
  border-radius: 8px;
  min-height: 48px;
  height: auto;
  padding: 4px 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  gap: 16px;
  font-size: var(--proctor-font-size, 26px);
  white-space: nowrap;
}

.duty-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--proctor-font-size, 26px);
}

.duty-title {
  font-weight: 800;
  font-size: var(--proctor-font-size, 26px);
  color: var(--extra-title-color, #1e293b);
}

.duty-teacher-name {
  font-weight: bold;
  font-size: var(--proctor-font-size, 26px);
  color: var(--extra-teacher-color, #b71c1c);
}

.duty-teacher-sub {
  font-weight: normal;
  font-size: calc(var(--proctor-font-size, 26px) - 4px);
  color: var(--teacher-sub-color, #37474f);
}

.duty-sep {
  color: #94a3b8;
  font-weight: bold;
  margin: 0 6px;
}

/* ==============================================================================
   7. TINH CHỈNH MÀU SẮC CÂY VÀ MÂY THEO TỪNG CHỦ ĐỀ (THEME INTEGRATION)
   ============================================================================== */
.theme-blueprint .tree-sprite,
.theme-blueprint .hedge-segment,
.theme-blueprint .branch-sprite {
  filter: hue-rotate(145deg) brightness(0.65) saturate(0.85);
  opacity: 0.88;
}

.theme-blueprint .cloud-sprite {
  filter: hue-rotate(145deg) brightness(0.65) saturate(0.85);
  opacity: 0.65;
}

.theme-minimal .tree-sprite,
.theme-minimal .hedge-segment,
.theme-minimal .cloud-sprite,
.theme-minimal .branch-sprite {
  filter: grayscale(0.9) contrast(0.92) brightness(1.08);
  opacity: 0.82;
}

.theme-warm .tree-sprite,
.theme-warm .hedge-segment,
.theme-warm .branch-sprite {
  filter: sepia(0.25) saturate(1.15) brightness(0.96);
}

.theme-warm .cloud-sprite {
  filter: sepia(0.2) saturate(1.1);
}

.theme-modern .tree-sprite,
.theme-modern .hedge-segment,
.theme-modern .branch-sprite {
  filter: contrast(1.05) saturate(1.1);
}

/* ==============================================================================
   8. TẦNG CÀNH CÂY MẶT TRƯỚC TOÀ NHÀ (FOREGROUND BRANCHES LAYER)
   - Nguồn sprite: themes/images/brachs.png (1536 x 1024 px, 16 cụm cành cây tự nhiên)
   - z-index = 25: Nằm ở mặt trước toà nhà, che nhẹ một chút cột góc ngoài toà nhà
   - Xoay hướng tự nhiên: mọc từ mép ngoài cùng vươn vào toà nhà
   - Hiệu ứng đung đưa nhẹ nhàng theo làn gió tự nhiên bằng CSS Keyframes
   - Tuyệt đối không có cành ở khoảng sân trung tâm giữa 2 toà nhà
   - Ẩn hoàn toàn khi ở chế độ 1 toà nhà (single-mode)
   ============================================================================== */
.foreground-branches-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 874px;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}

/* Ẩn hoàn toàn cành cây khi ở chế độ 1 toà nhà */
.single-layout ~ .foreground-branches-layer,
.branches-single-mode {
  display: none !important;
}

.branch-slot {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
  will-change: transform;
}

.branch-sprite {
  background-image: url('images/brachs.png');
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 16 cụm cành cây bóc tách chuẩn từ sprite sheet themes/images/brachs.png */
.branch-sprite-0  { width: 382px; height: 192px; background-position: -14px -36px; }
.branch-sprite-1  { width: 331px; height: 201px; background-position: -433px -39px; }
.branch-sprite-2  { width: 332px; height: 215px; background-position: -804px -29px; }
.branch-sprite-3  { width: 330px; height: 216px; background-position: -1186px -20px; }
.branch-sprite-4  { width: 349px; height: 209px; background-position: -27px -295px; }
.branch-sprite-5  { width: 322px; height: 206px; background-position: -446px -282px; }
.branch-sprite-6  { width: 304px; height: 153px; background-position: -832px -311px; }
.branch-sprite-7  { width: 314px; height: 208px; background-position: -1190px -280px; }
.branch-sprite-8  { width: 355px; height: 187px; background-position: -13px -541px; }
.branch-sprite-9  { width: 312px; height: 191px; background-position: -433px -537px; }
.branch-sprite-10 { width: 306px; height: 213px; background-position: -814px -531px; }
.branch-sprite-11 { width: 328px; height: 179px; background-position: -1188px -549px; }
.branch-sprite-12 { width: 364px; height: 203px; background-position: -20px -785px; }
.branch-sprite-13 { width: 315px; height: 140px; background-position: -457px -816px; }
.branch-sprite-14 { width: 308px; height: 215px; background-position: -832px -781px; }
.branch-sprite-15 { width: 312px; height: 159px; background-position: -1200px -813px; }

/* ------------------------------------------------------------------------------
   8.1 KEYFRAMES DIỄN HOẠT ĐUNG ĐƯA THEO GIÓ TỰ NHIÊN
   ------------------------------------------------------------------------------ */
@keyframes branchSwayL1 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  25%  { transform: rotate(1.6deg) translate3d(2px, -1px, 0); }
  50%  { transform: rotate(-0.8deg) translate3d(-1px, 1px, 0); }
  75%  { transform: rotate(1.2deg) translate3d(1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayL2 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  30%  { transform: rotate(-1.5deg) translate3d(-2px, 1px, 0); }
  60%  { transform: rotate(1.4deg) translate3d(1.5px, -1px, 0); }
  85%  { transform: rotate(-0.6deg) translate3d(-1px, 0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayL3 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  22%  { transform: rotate(1.3deg) translate3d(1.5px, -1px, 0); }
  55%  { transform: rotate(-1.1deg) translate3d(-1px, 1px, 0); }
  80%  { transform: rotate(0.9deg) translate3d(1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayL4 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  28%  { transform: rotate(-1.4deg) translate3d(-1.5px, 1px, 0); }
  65%  { transform: rotate(1.2deg) translate3d(1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayR1 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  25%  { transform: rotate(-1.6deg) translate3d(-2px, -1px, 0); }
  50%  { transform: rotate(0.8deg) translate3d(1px, 1px, 0); }
  75%  { transform: rotate(-1.2deg) translate3d(-1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayR2 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  30%  { transform: rotate(1.5deg) translate3d(2px, 1px, 0); }
  60%  { transform: rotate(-1.4deg) translate3d(-1.5px, -1px, 0); }
  85%  { transform: rotate(0.6deg) translate3d(1px, 0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayR3 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  22%  { transform: rotate(-1.3deg) translate3d(-1.5px, -1px, 0); }
  55%  { transform: rotate(1.1deg) translate3d(1px, 1px, 0); }
  80%  { transform: rotate(-0.9deg) translate3d(-1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes branchSwayR4 {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  28%  { transform: rotate(1.4deg) translate3d(1.5px, 1px, 0); }
  65%  { transform: rotate(-1.2deg) translate3d(-1px, -0.5px, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

/* Các lớp gán hiệu ứng đung đưa cho từng cành (lệch pha delay tự nhiên) */
.branch-sway {
  will-change: transform;
}

.branch-sway-left-1 {
  transform-origin: 0% 40%;
  animation: branchSwayL1 5.8s ease-in-out infinite;
  animation-delay: -1.2s;
}

.branch-sway-left-2 {
  transform-origin: 0% 50%;
  animation: branchSwayL2 6.7s ease-in-out infinite;
  animation-delay: -3.4s;
}

.branch-sway-left-3 {
  transform-origin: 0% 45%;
  animation: branchSwayL3 5.3s ease-in-out infinite;
  animation-delay: -0.7s;
}

.branch-sway-left-4 {
  transform-origin: 0% 60%;
  animation: branchSwayL4 6.2s ease-in-out infinite;
  animation-delay: -2.5s;
}

.branch-sway-right-1 {
  transform-origin: 100% 50%;
  animation: branchSwayR1 6.1s ease-in-out infinite;
  animation-delay: -2.1s;
}

.branch-sway-right-2 {
  transform-origin: 100% 50%;
  animation: branchSwayR2 6.9s ease-in-out infinite;
  animation-delay: -4.3s;
}

.branch-sway-right-3 {
  transform-origin: 100% 45%;
  animation: branchSwayR3 5.5s ease-in-out infinite;
  animation-delay: -1.6s;
}

.branch-sway-right-4 {
  transform-origin: 100% 60%;
  animation: branchSwayR4 6.4s ease-in-out infinite;
  animation-delay: -3.1s;
}

/* ------------------------------------------------------------------------------
   8.2 ĐỊNH VỊ TOẠ ĐỘ CÀNH CÂY TỪ MÉP NGOÀI CÙNG (CHẾ ĐỘ 2 DÃY NHÀ - DUAL MODE)
   - Cành mọc từ mép ngoài cùng vươn vào toà nhà
   - Che nhẹ một phần cột góc ngoài (X: 43px..71px ở Toà A và X: 1609px..1637px ở Toà B)
   - Tuyệt đối không có cành ở khoảng sân trung tâm giữa 2 toà nhà
   ------------------------------------------------------------------------------ */
/* Mạn trái Toà A (Mép ngoài cùng bên trái) */
.branch-left-top {
  left: -152px;
  top: 165px;
}
.branch-left-top .branch-sprite {
  transform: scale(0.65) rotate(5deg);
  transform-origin: top left;
}

.branch-left-mid1 {
  left: -166px;
  top: 350px;
}
.branch-left-mid1 .branch-sprite {
  transform: scale(0.60) rotate(-4deg);
  transform-origin: top left;
}

.branch-left-mid2 {
  left: -140px;
  top: 515px;
}
.branch-left-mid2 .branch-sprite {
  transform: scale(0.58) rotate(2deg);
  transform-origin: top left;
}

.branch-left-bot {
  left: -126px;
  top: 680px;
}
.branch-left-bot .branch-sprite {
  transform: scale(0.60) rotate(-8deg);
  transform-origin: top left;
}

/* Mạn phải Toà B (Mép ngoài cùng bên phải) */
.branch-right-top {
  right: -196px;
  top: 165px;
}
.branch-right-top .branch-sprite {
  transform: scaleX(-1) scale(0.65) rotate(-5deg);
  transform-origin: 50% 50%;
}

.branch-right-mid1 {
  right: -189px;
  top: 350px;
}
.branch-right-mid1 .branch-sprite {
  transform: scaleX(-1) scale(0.60) rotate(4deg);
  transform-origin: 50% 50%;
}

.branch-right-mid2 {
  right: -194px;
  top: 515px;
}
.branch-right-mid2 .branch-sprite {
  transform: scaleX(-1) scale(0.58) rotate(-2deg);
  transform-origin: 50% 50%;
}

.branch-right-bot {
  right: -199px;
  top: 680px;
}
.branch-right-bot .branch-sprite {
  transform: scaleX(-1) scale(0.60) rotate(8deg);
  transform-origin: 50% 50%;
}