/* ============================================================
   danangmedia-components.css  — v1.0
   Shared UI components dùng cho mọi custom page tại DSM
   Load global qua dm_page_assets() khi trang có page CSS
   HOẶC load global qua danangmedia_enqueue_styles() nếu cần mọi trang

   INCLUDES:
   - CSS custom properties (design tokens)
   - Lightbox overlay
   - Scroll reveal animation
   - Shared button styles
   - Shared section/wrap utilities
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --dm-white:   #FFFFFF;
  --dm-bg:      #F8F7F5;
  --dm-line:    #E8E2D8;
  --dm-text:    #181410;
  --dm-text2:   #484030;
  --dm-muted:   #9A9080;
  --dm-r:       12px;
  --dm-sh:      0 2px 24px rgba(0,0,0,.07);
  --dm-sh2:     0 16px 60px rgba(0,0,0,.12);
}

/* ── LIGHTBOX — dùng chung mọi trang gallery ───────────── */
.lb {
  display:none;
  position:fixed;inset:0;
  background:rgba(6,3,12,.96);
  z-index:9999;
  align-items:center;justify-content:center;
}
.lb.on { display:flex }
.lb img {
  max-height:90vh;max-width:90vw;
  border-radius:var(--dm-r,12px);
  transition:opacity .22s;
}
.lb-x {
  position:absolute;top:18px;right:22px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:18px;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.lb-a {
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:26px;
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.lb-a.p { left:16px }
.lb-a.n { right:16px }

/* ── SCROLL REVEAL ─────────────────────────────────────── */
.rv {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.rv.in {
  opacity:1;
  transform:translateY(0);
}

/* ── FLOAT CONTAINER — dùng chung, nội dung inject bằng JS */
.dj-float {
  position:fixed;bottom:0;left:0;right:0;height:100vh;
  pointer-events:none;z-index:0;overflow:hidden;
}
.dj-icon {
  position:absolute;bottom:-60px;
  animation:floatDJ linear forwards;opacity:0;
  user-select:none;
}
@keyframes floatDJ {
  0%   { transform:translateY(0) rotate(-6deg); opacity:0; }
  8%   { opacity:.13; }
  90%  { opacity:.06; }
  100% { transform:translateY(-110vh) rotate(16deg); opacity:0; }
}

/* ── SHARED UTILITIES ──────────────────────────────────── */
.dm-wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
.dm-sec  { padding:84px 24px; position:relative; z-index:1; }
.dm-sec-bg  { background:var(--dm-bg,#F8F7F5); }
.dm-topbar-link { color:#C8A0F0; font-weight:700; }