/**
 * lynk-layout-fixes.css
 * Global layout & spacing corrections — load cuối cùng (priority 99).
 * Sửa các vấn đề về khoảng cách, max-width, responsive trên tất cả trang.
 */

/* ═══════════════════════════════════════════════════════════════
   1. ELEMENTOR CONTAINER — bỏ giới hạn width mặc định quá hẹp
   ═══════════════════════════════════════════════════════════════ */

/* Cho phép các section full-width đúng nghĩa */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. TRANG CHỦ — lynk-home-new
   ═══════════════════════════════════════════════════════════════ */

/* Hero: full width hơn, không bị bóp */
.lynk-home-hero {
  /* Thoát khỏi padding của container để hero rộng hơn */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

/* Phần home-new đặt trong elementor cần offset lại */
@media (min-width: 641px) {
  .lynk-home-hero {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

@media (max-width: 640px) {
  .lynk-home-hero {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0 !important; /* Full bleed trên mobile nhỏ */
  }
}

/* Moments (gallery marquee) đã có margin -50vw, đảm bảo không cắt */
.lynk-home-moments {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   3. NAVBAR — cân chỉnh spacing top của content
   ═══════════════════════════════════════════════════════════════ */

/* Đảm bảo các trang có padding-top đúng sau navbar */
.lynk-home-new {
  padding-top: max(calc(var(--lynk-header-h, 5rem) + 1.5rem), calc(env(safe-area-inset-top, 0px) + 5.5rem));
}

/* About page: hero nằm ngay dưới navbar */
.anlie-about {
  padding-top: 0;
}

.anlie-about-hero {
  /* Đủ không gian cho navbar cố định */
  padding-top: var(--lynk-header-h, 5rem);
  margin-top: 0 !important;
}

.anlie-about-hero__inner {
  padding-top: 1.5rem;
}

/* Contact page — sát navbar hơn */
.anlie-contact {
  padding-top: max(calc(var(--lynk-header-h, 5rem) + 0.75rem), calc(env(safe-area-inset-top, 0px) + 5.5rem));
}

/* Games hub — sát navbar hơn */
.lynk-games-hub {
  padding-top: max(calc(var(--lynk-header-h, 5rem) + 0.75rem), calc(env(safe-area-inset-top, 0px) + 5.5rem));
}

/* Game pages — đẩy nội dung xuống dưới navbar cố định */

/* Lynk Tap: padding-top đẩy content xuống, không xung đột với game CSS */
.lynk-tap {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  );
}

/* Block Blast: game CSS dùng padding shorthand nên cần !important để thắng */
.lynk-block-blast {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}
/* Fullscreen: reset về safe-area (không cần navbar offset khi fullscreen) */
.lynk-block-blast.is-fullscreen,
.lynk-block-blast.is-pseudo-fullscreen {
  padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
}

/* Lynk Adventure: padding-top đẩy HUD xuống dưới navbar */
.la-wrapper {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  );
}

/* Lynk Beat: shell có fixed height → dùng margin-top thay vì padding-top */
.lb2-shell,
.lynk-beat-shell {
  margin-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  );
}

/* Gallery, Video, News — sát navbar hơn */
.lynk-gallery-wrap {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}

.anlie-video-page {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}

.news-section-wrapper {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 2rem),
    calc(env(safe-area-inset-top, 0px) + 7rem)
  ) !important;
  margin-top: 0 !important;
}

/* Gallery album (photo pages) — sát navbar hơn */
.lynk-gallery-album-wrap {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}

.lynk-gallery-album-head {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Track/Song detail page — sát navbar, giống Video/Tin tức */
.lynk-song-detail-page {
  padding-top: 1.5rem !important;
}

/* Reset Elementor wrapper padding cho tất cả trang custom spacing */
body.lynk-has-custom-spacing > .elementor,
body.lynk-has-song-detail > .elementor {
  padding-top: 0 !important;
}

body.lynk-has-song-detail .elementor-section,
body.lynk-has-song-detail .e-con {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.lynk-has-song-detail .elementor-widget-wrap {
  padding-top: 0 !important;
}

body.lynk-has-song-detail .elementor-widget-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* News detail — sát navbar hơn */
.anlie-news-detail {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}

/* Clip/Video detail — sát navbar hơn */
.anlie-video-detail {
  padding-top: max(
    calc(var(--lynk-header-h, 5rem) + 0.5rem),
    calc(env(safe-area-inset-top, 0px) + 5.25rem)
  ) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. RESPONSIVE — Mobile & Tablet chung
   ═══════════════════════════════════════════════════════════════ */

/* Đảm bảo không bị overflow ngang trên mobile */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Tất cả trang: padding ngang tối thiểu trên mobile */
@media (max-width: 640px) {
  /* Trang chủ */
  .lynk-home-new {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 3.5rem !important;
  }

  /* Hero không border-radius trên mobile nhỏ — full bleed */
  .lynk-home-hero {
    border-radius: 1.5rem !important;
    min-height: 480px;
  }

  /* Section separators nhỏ hơn trên mobile */
  .lynk-home-new > .lynk-home-block,
  .lynk-home-new > .lynk-home-grid-2 {
    padding-top: 1.5rem;
  }

  /* About hero: đủ cao trên mobile */
  .anlie-about-hero {
    min-height: min(75vh, 38rem);
  }

  /* Gallery: 2 cột vẫn ok, giảm gap */
  .lynk-gallery-wrap {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  /* Video page */
  .anlie-video-page {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px));
  }

  /* News */
  .news-section-wrapper {
    padding: max(12px, env(safe-area-inset-left, 0px));
  }

  /* Contact */
  .anlie-contact {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Games */
  .lynk-games-hub {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px) {
  /* Tablet: hero giữ border-radius nhẹ */
  .lynk-home-hero {
    border-radius: 2rem !important;
  }

  /* Bio section: stack image trên, text dưới */
  .lynk-home-bio-image {
    min-height: 280px;
  }

  /* News section: full width */
  .news-section-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto;
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. MUSIC PAGE — padding-top nhất quán
   ═══════════════════════════════════════════════════════════════ */

/* Music page: padding-top xem lynk-music-page.css (giống Gallery/Video formula) */

/* ═══════════════════════════════════════════════════════════════
   6. HOME — section block-heads căn giữa
   ═══════════════════════════════════════════════════════════════ */

/* Block heads: căn giữa cho tất cả màn hình */
.lynk-home-block-head {
  align-items: center !important;
  text-align: center !important;
}

.lynk-home-block-head-text {
  align-items: center !important;
  text-align: center !important;
}

.lynk-home-block-head h1,
.lynk-home-block-head h2,
.lynk-home-block-head h3,
.lynk-home-block-head p {
  text-align: center !important;
}

/* "Xem tất cả" button cũng căn giữa */
.lynk-home-block-head .lynk-home-block-more,
.lynk-home-block-head-more {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Toàn bộ block (title + button) căn giữa */
.lynk-home-block > .lynk-home-block-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. VIDEO GRID — responsive đẹp hơn ở tablet
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 992px) {
  .lynk-home-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. FOOTER HOME — spacing
   ═══════════════════════════════════════════════════════════════ */

.lynk-home-footer {
  padding-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   9. GALLERY — 1 cột trên mobile nhỏ
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .lynk-gallery-clean-grid {
    column-count: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. SMOOTH SCROLL & BOX MODEL GLOBAL
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}