/* V7.3 — cân đối bề ngang toàn trang.
   Mọi khối dùng chung một lề: 5% bề rộng màn hình, nội dung tối đa 1760px.
   Trước đây header dùng 5% còn các section bị khoá trong khung 1400px,
   hero trong khung 1600px, bản đồ khám phá trong khung 1240px
   → màn hình >1500px trống nhiều và lệch so với header.
   Chỉ áp từ 801px; giao diện điện thoại giữ nguyên. Nạp sau cùng. */
:root{--page-gutter:max(5vw,calc((100vw - 1760px) / 2))}

@media (min-width:801px){
  .concept-bar,
  .header,
  .content-nav,
  .light-section,
  .dark-section,
  .full-footer,
  section.visual-atlas.explore-hub{
    padding-left:var(--page-gutter);
    padding-right:var(--page-gutter);
  }

  /* Hero: bỏ khung 1600px, dùng chung lề */
  .hero-inner{
    max-width:none;
    padding-left:var(--page-gutter);
    padding-right:var(--page-gutter);
  }
  .hero-bottom{
    margin-left:var(--page-gutter);
    margin-right:var(--page-gutter);
  }

  /* Bản đồ khám phá: bỏ khung 1240px */
  .explore-shell{max-width:none}

  /* Khối mở đầu sứ mệnh: bỏ khung 1160px của dải chữ và 3 trụ cột */
  .opening-ribbon,
  .mission-pillars{max-width:none}
  .mission-opening>h2{max-width:1200px}
}

/* V7.4 — một nút "Toàn màn hình" trong hộp xem tư liệu và hộp xem ảnh */
.fs-button{display:inline-flex;align-items:center;gap:8px}
.fs-button svg{flex:none}
.visual-subbar{justify-content:flex-end}
.source-controls{margin-left:auto}
.visual-footer{justify-content:flex-end}

/* Khi toàn màn hình: nền tối, bấm vào ảnh hoặc Esc để thoát */
#visual-original:fullscreen,.media-scroll:fullscreen{display:flex;overflow:auto;background:#050e18;padding:0;margin:0;width:100vw;height:100vh;max-height:none;cursor:zoom-out}
.fs-pseudo{position:fixed!important;inset:0;z-index:2147483647;display:flex!important;overflow:auto;background:#050e18;padding:0!important;margin:0;width:100vw;height:100vh;max-height:none;cursor:zoom-out}
/* Tư liệu (thường rất dài): vừa bề ngang, cuộn dọc */
#visual-original:fullscreen #visual-source-image,#visual-original.fs-pseudo #visual-source-image{display:block;margin:auto;width:auto;max-width:100%;height:auto;max-height:none}
/* Ảnh chụp: hiện trọn trong màn hình */
.media-scroll:fullscreen img,.media-scroll.fs-pseudo img{display:block;margin:auto;width:auto;height:auto;max-width:100%;max-height:100vh;object-fit:contain}

/* V7.4 — tiêu đề hộp tư liệu dùng Georgia làm dấu tiếng Việt lệch ("vô´n", "nhâ´t") trên Windows.
   Dùng phông tiêu đề chung của trang (Playfair Display, có đủ tiếng Việt). */
.visual-toolbar h2{font-family:var(--serif)}

/* V7.5 — logo đầu trang to và nét hơn (ảnh 256/512 px cắt từ desocompany.png thay cho logo.png 67 px).
   52px → 76px máy tính, 60px điện thoại. Viền vàng mảnh giữ như cũ. */
.header .original-logo{width:76px;height:76px;padding:0;background:#fff;border:1px solid #c8b77b;border-radius:50%;object-fit:contain;flex:none}
.header .brand{gap:16px}
@media (max-width:800px){.header .original-logo{width:60px;height:60px}}

/* V7.5 — chữ to hơn làm 2 nút ở hero xuống dòng trên điện thoại: giữ mỗi nút 1 dòng, thiếu chỗ thì xếp xuống hàng dưới */
@media (max-width:520px){
  .hero-actions{flex-wrap:wrap;row-gap:14px}
  .hero-actions .button,.hero-actions .text-link{white-space:nowrap}
}
@media (max-width:520px){
  .sculpture-toggle{white-space:nowrap}
}
/* màn hình rất nhỏ (≤420px): dải dưới hero dư 2px vì chữ to hơn → giảm giãn chữ, khoảng cách */
@media (max-width:420px){.hero-bottom{letter-spacing:.4px;gap:12px}}
/* điện thoại: dải tab "miền nội dung" (cuộn ngang) dài hơn do chữ to → khung khu bản đồ tràn 2px; cắt phần tràn của riêng khu này */
@media (max-width:800px){section.visual-atlas.explore-hub{overflow-x:clip}}