/* Cây văn hóa - DATA Group */
:root {
  --red: #d91f26;
  --red-dark: #b5161c;
  --ink: #23262b;
  --muted: #7b8088;
  --line: #e9ebef;
  --pink: #fdeeee;
  --pink-line: #f5cfcf;
  --brown-1: #94592a;
  --brown-2: #5f3517;
  --gold: #d7a95b;
  --cream: #f8e6bf;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 34px; display: block; }
.logo-text { font-size: 30px; font-weight: 800; letter-spacing: .02em; color: #4a4d52; }
.logo-text em { font-style: normal; color: var(--red); }

.tabs { display: flex; gap: 34px; height: 100%; }
.tab {
  display: flex; align-items: center;
  height: 100%;
  font-size: 15px; font-weight: 500;
  color: #30343a; text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s;
}
.tab:hover { color: var(--red); }
.tab.active { color: var(--red); font-weight: 700; border-bottom-color: var(--red); }

.tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.search {
  display: flex; align-items: center; gap: 8px;
  width: 230px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 99px; background: #fff;
  color: var(--muted);
}
.search svg { width: 18px; height: 18px; flex: none; }
.search input { border: 0; outline: 0; width: 100%; font: inherit; font-size: 13.5px; background: transparent; color: var(--ink); }
.icon-btn, .avatar {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: #4b4f56; cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: #f3f4f6; }
.bell .dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.avatar { background: #8d9096; color: #fff; }
.avatar svg { width: 22px; height: 22px; fill: #fff; stroke: none; }

/* ---------- Bố cục chính ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 22px 8px;
}
.stage-wrap { overflow-x: auto; min-width: 0; display: flex; justify-content: center; }

/* Sân khấu cây: mọi kích thước chữ dùng cqw nên co giãn theo ảnh.
   Giới hạn max-width để cây không phình quá to trên màn hình rộng
   (chiều cao ăn theo aspect-ratio, phình to là nguyên nhân gây cuộn dọc). */
.stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1024 / 851;
  width: 100%;
  max-width: 900px;
  min-width: 640px;
  margin: 0 auto;
  background: linear-gradient(#f6f8f4, #eef4e8);
  border-radius: 14px;
  overflow: hidden;
}
.tree { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.abs {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
}

/* Chữ trang trí */
.quote {
  position: absolute; left: 3.2%; top: 4%;
  max-width: 22cqw;
  font-family: 'Dancing Script', 'Be Vietnam Pro', cursive;
  font-size: 2.6cqw; line-height: 1.32; color: #4a4d52;
}
.quote .qmark { color: var(--red); font-weight: 800; font-size: 3.2cqw; line-height: 0; margin-right: .5cqw; vertical-align: -.5cqw; }
.quote::after, .script::after {
  content: ''; display: block; width: 3.4cqw; height: .2cqw; background: var(--red); margin-top: 1.2cqw;
}
.script {
  position: absolute; right: 3%; top: 4%;
  max-width: 14cqw; text-align: right;
  font-family: 'Dancing Script', 'Be Vietnam Pro', cursive;
  font-size: 2.3cqw; line-height: 1.3; color: #55585e;
}
.script::after { margin-left: auto; }

.legend {
  position: absolute; right: 2.2%; top: 17%;
  padding: .9cqw 1.2cqw; border-radius: .9cqw;
  background: rgba(24, 74, 52, .93); color: #fff;
  font-size: 1cqw; line-height: 1.7;
  box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.25);
}
.legend li { list-style: none; display: flex; align-items: center; gap: .6cqw; }
.legend i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--c); flex: none; }

/* Bảng gỗ NĂM 1-8 */
.board-year {
  width: 8.6cqw;
  padding: .5cqw 0;
  font: inherit; font-size: 1.15cqw; font-weight: 800; letter-spacing: .03em;
  color: var(--cream); text-align: center;
  background: linear-gradient(var(--brown-1), var(--brown-2));
  border: .2cqw solid var(--gold);
  border-radius: 1cqw;
  box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.35), inset 0 .1cqw 0 rgba(255,255,255,.25);
  cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.board-year:hover { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.12); }
.board-year.active {
  box-shadow: 0 0 1.4cqw rgba(255, 214, 120, .9), 0 .3cqw .6cqw rgba(0,0,0,.35);
  filter: brightness(1.08);
}

/* Bảng KHỐI ... + Trưởng Khối */
.block {
  display: flex; flex-direction: column; align-items: center;
  border: 0; background: none; font: inherit; cursor: default;
  filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.35));
  transition: transform .15s;
}
.block:hover { transform: translate(-50%, -50%) scale(1.05); }
.block-main {
  display: flex; align-items: center; gap: .7cqw;
  padding: .7cqw 1.4cqw;
  background: linear-gradient(#6b3d1b, #472610);
  border: .2cqw solid #b98a45; border-radius: 1.2cqw;
  color: #fff3d6; font-weight: 800; font-size: 1.25cqw; white-space: nowrap;
}
.block-main .ico { display: grid; place-items: center; }
.block-main svg { width: 1.9cqw; height: 1.9cqw; stroke-width: 1.9; }
.block-sub {
  margin-top: -.25cqw; padding: .3cqw 1.8cqw;
  background: linear-gradient(#f9edd2, #e6cf9d);
  border: .15cqw solid #b98a45; border-radius: 1cqw;
  color: var(--brown-2); font-weight: 700; font-size: 1.05cqw; white-space: nowrap;
}

/* Nhãn gốc: BAN GIÁM ĐỐC */
.root {
  padding: .7cqw 2cqw;
  font: inherit; font-size: 1.35cqw; font-weight: 800; letter-spacing: .04em;
  color: var(--brown-2);
  background: linear-gradient(#fbefd4, #e9d3a0);
  border: .22cqw solid var(--gold); border-radius: 1.3cqw;
  box-shadow: 0 0 1.6cqw rgba(255, 214, 120, .9), 0 .3cqw .6cqw rgba(0,0,0,.3);
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, filter .15s;
}
.root:hover { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.06); }

/* 5 giá trị dưới rễ */
.value {
  display: flex; align-items: center; justify-content: center;
  padding: .65cqw 1.8cqw;
  font: inherit; font-size: 1.3cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  background: linear-gradient(color-mix(in srgb, var(--c) 85%, #000 15%), color-mix(in srgb, var(--c) 58%, #000 42%));
  border: .2cqw solid var(--c); border-radius: 99cqw;
  box-shadow: 0 0 1.3cqw color-mix(in srgb, var(--c) 65%, transparent), 0 .3cqw .6cqw rgba(0,0,0,.35);
  cursor: default;
  transition: transform .15s, filter .15s;
}
.value:hover { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.12); }

/* ---------- Bảng tài liệu theo năm ---------- */
.panel {
  align-self: start;
  padding: 18px 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(30, 40, 60, .08);
}
.panel-head { display: flex; gap: 12px; align-items: center; padding: 0 6px 14px; }
.panel-head .badge {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--pink); color: var(--red);
}
.panel-head .badge svg { width: 26px; height: 26px; }
.panel-head h2 { font-size: 19px; font-weight: 800; color: #1f2226; letter-spacing: .01em; }
.panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.years { display: flex; flex-direction: column; gap: 6px; }
.year-row {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto 18px;
  align-items: center; gap: 12px;
  padding: 8px 10px;
  border: 1px solid transparent; border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.year-row:hover { background: #fafafb; border-color: var(--line); }
.year-row.active { background: var(--pink); border-color: var(--pink-line); }

.thumb {
  width: 68px; height: 56px; border-radius: 7px; object-fit: cover; display: block;
  background: linear-gradient(#e2f0d9, #8fbf7a);
}
.thumb.ph { display: grid; place-items: center; color: #3f7d34; }
.thumb.ph svg { width: 26px; height: 26px; }

.year-info b { display: block; font-size: 15px; font-weight: 700; color: #1f2226; }
.year-info span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.year-row.active .year-info span { margin-bottom: 8px; }

.year-actions { display: flex; gap: 10px; align-self: start; padding-top: 4px; }
.year-actions svg { width: 18px; height: 18px; }
.year-actions .doc { color: var(--red); }
.year-actions .img { color: #6c7078; }
.year-row .chev { width: 16px; height: 16px; color: #555a62; justify-self: end; }

.btn-view {
  position: absolute; right: 34px; bottom: 9px;
  padding: 5px 12px; border: 0; border-radius: 99px;
  background: var(--red); color: #fff;
  font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  cursor: pointer;
}
.btn-view:hover { background: var(--red-dark); }

.panel-note {
  display: flex; gap: 14px; align-items: center;
  margin-top: 12px; padding: 14px 16px;
  background: var(--pink); border-radius: 12px;
  color: #444; font-size: 12px; font-style: italic; line-height: 1.5;
}
.panel-note svg { width: 34px; height: 34px; color: var(--red); flex: none; }

/* ---------- Tagline cuối trang ---------- */
.tagline {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px 20px 22px;
  font-size: 15px; font-weight: 500; letter-spacing: .28em; color: #3c3f45;
}
.tagline .rule { width: 90px; height: 2px; background: var(--red); flex: none; }
.tagline .bullet { color: var(--red); font-size: 12px; letter-spacing: 0; }

/* ---------- Modal thông báo (tính năng đang phát triển) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(24, 26, 30, .5);
  animation: modal-fade .15s ease-out;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 360px;
  padding: 30px 26px 24px;
  background: #fff; border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: modal-pop .18s ease-out;
}
.modal-ico {
  width: 46px; height: 46px; margin: 0 auto 14px;
  color: var(--red);
}
.modal-msg { font-size: 15px; font-weight: 600; line-height: 1.5; color: #26292e; }
.modal-btn {
  margin-top: 20px; padding: 10px 28px; border: 0; border-radius: 99px;
  background: var(--red); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.modal-btn:hover { background: var(--red-dark); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---------- Thông báo lỗi ---------- */
.error-box {
  grid-column: 1 / -1;
  padding: 24px; border: 1px solid var(--pink-line); border-radius: 12px;
  background: var(--pink); color: var(--red-dark); font-weight: 600;
}

/* ---------- Responsive tạm (bản mobile làm ở bước sau) ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 20px; }
  .tabs { gap: 20px; overflow-x: auto; }
  .search { display: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 14px; }
  .tagline { letter-spacing: .12em; font-size: 12px; flex-wrap: wrap; gap: 8px; }
  .tagline .rule { display: none; }
  /* Màn hình nhỏ: chỉ giữ tab đang dùng (Cây văn hóa), ẩn các mục chưa hoàn thiện */
  .tab:not(.active) { display: none; }
  .tabs { gap: 0; overflow: visible; }
}