:root{
  /* Bảng màu đồng bộ revittech.vn */
  --teal-deep:#0E7068;
  --teal:#16B0A1;
  --teal-bright:#2BCEBC;
  --teal-50:#EDFCFA;
  --amber:#E8A33D;
  --coral:#E5685A;
  --ink:#0B1218;
  --muted:#5F6E78;
  --line:#e2e8e7;
  --bg:#FAFCFC;
  --panel:#ffffff;
  --radius:14px;
  --shadow:0 1px 2px rgba(11,18,24,.04), 0 6px 20px rgba(11,18,24,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100%;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Thanh nav (logo + tab nhỏ bên trái) ---------- */
.hub-nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:9px 18px;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(11,18,24,.04);
  flex-wrap:wrap;
}
.hub-nav .logo{height:30px;width:auto;display:block}
.hub-nav .sep{width:1px;height:24px;background:var(--line)}

.tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;line-height:1;
}
.tab .ico{font-size:15px;line-height:1}
.tab:hover{background:var(--teal-50);color:var(--teal-deep)}
.tab.active{
  color:#fff;
  background:linear-gradient(135deg,var(--teal) 0%, var(--teal-deep) 100%);
  border-color:transparent;
  box-shadow:0 2px 8px rgba(14,112,104,.30);
}

.hub-nav .grow{flex:1}
.hub-nav .site{
  font-size:12.5px;font-weight:700;color:var(--teal-deep);text-decoration:none;
  background:var(--teal-50);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;transition:.15s;white-space:nowrap;
}
.hub-nav .site:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- Stage / iframe ---------- */
.stage{
  flex:1;
  margin:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  min-height:62vh;
}
.frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;pointer-events:none;transition:opacity .2s;
  background:#fff;
}
.frame.show{opacity:1;pointer-events:auto;position:relative;z-index:1}

/* placeholder (notes chưa deploy) */
.placeholder{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:30px;color:var(--muted);
}
.placeholder.show{display:flex}
.placeholder .big{font-size:46px}
.placeholder h2{margin:0;color:var(--ink);font-size:20px}
.placeholder p{margin:0;max-width:520px;font-size:14px;line-height:1.6}
.placeholder code{background:var(--teal-50);padding:2px 7px;border-radius:6px;font-size:13px;color:var(--teal-deep)}

/* loading spinner */
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--teal);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#fff;z-index:2;
}
.loading.show{display:flex}

/* footer */
.hub-foot{
  text-align:center;color:var(--muted);font-size:12px;
  padding:0 16px 14px;
}
.hub-foot a{color:var(--teal-deep)}

@media (max-width:560px){
  .hub-nav{padding:8px 12px;gap:10px}
  .hub-nav .logo{height:26px}
  .tab{font-size:12.5px;padding:6px 10px}
  .tab .lbl-long{display:none}
  .stage{margin:10px}
}