/* Home page mobile layout. The page markup stays editable in WordPress. */
@media (max-width: 760px) {
  .global-header .header-shell {
    width: calc(100% - 20px);
    gap: 7px;
  }
  .global-header .brand-logo,
  .global-header .brand-logo img {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    max-height: 70px;
  }
  .global-header .nav-glass {
    height: 54px;
    padding: 6px;
    gap: 5px;
    justify-content: space-between;
  }
  .global-header .menu-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-right: auto;
  }
  .global-header .nav-actions {
    gap: 5px;
  }
  body[data-route="/"] .global-header .verify-cta {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    gap: 4px;
    font-size: .7rem;
  }
  body[data-route="/"] .global-header .verify-cta .verify-label {
    display: inline;
  }
  body[data-route="/"] .global-header .support {
    min-height: 40px;
    padding: 0 9px;
    gap: 5px;
    font-size: 0;
  }
  .global-header .support::before {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc14a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13v-2a9 9 0 0 1 18 0v2'/%3E%3Crect x='2' y='12' width='4' height='7' rx='2'/%3E%3Crect x='18' y='12' width='4' height='7' rx='2'/%3E%3Cpath d='M20 19a5 5 0 0 1-5 3h-3'/%3E%3C/svg%3E");
    box-shadow: none;
    animation: none;
  }
  body[data-route="/"] .global-header .support::after {
    content: "Hỗ trợ";
    font-size: .68rem;
  }

  .governance {
    min-height: 0;
    padding: 88px 0 58px;
  }
  .governance-bg {
    background-position: center top;
    opacity: .72;
  }
  .governance .section-heading {
    width: calc(100% - 32px);
    margin-bottom: 8px;
    text-align: center;
  }
  .governance .section-heading h2 {
    max-width: 680px;
    margin-inline: auto;
    font-size: clamp(1.9rem, 7vw, 2.75rem);
    line-height: 1.18;
  }
  .governance .section-heading p:last-child {
    max-width: 640px;
    font-size: .91rem;
    line-height: 1.65;
  }
  .governance-grid {
    width: calc(100% - 28px);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .governance-grid .spade-stage {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: clamp(235px, 60vw, 350px);
    overflow: visible;
  }
  .governance-grid .logo-core {
    width: clamp(195px, 49vw, 265px);
    height: clamp(195px, 49vw, 265px);
  }
  .governance-grid .logo-core img {
    width: 90%;
  }
  .governance-grid::before {
    content: "6 GIÁ TRỊ VẬN HÀNH";
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    margin: 0 0 5px;
    color: #ffcf69;
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-align: center;
  }
  .governance-grid .principles {
    display: contents;
  }
  .governance-grid .principles-left .glass-card:nth-child(1) { grid-area: 3 / 1; }
  .governance-grid .principles-left .glass-card:nth-child(2) { grid-area: 3 / 2; }
  .governance-grid .principles-left .glass-card:nth-child(3) { grid-area: 4 / 1; }
  .governance-grid .principles-right .glass-card:nth-child(1) { grid-area: 4 / 2; }
  .governance-grid .principles-right .glass-card:nth-child(2) { grid-area: 5 / 1; }
  .governance-grid .principles-right .glass-card:nth-child(3) { grid-area: 5 / 2; }
  .governance-grid .glass-card {
    min-width: 0;
    min-height: 172px;
    padding: 13px 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    text-align: center;
    border-color: rgba(255, 186, 70, .62);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(72, 24, 9, .88), rgba(25, 7, 5, .91));
  }
  .governance-grid .glass-card .value-icon {
    width: 78px;
    height: 78px;
    margin: 0;
    flex: 0 0 78px;
    overflow: visible;
    animation: none;
  }
  .governance-grid .glass-card .value-icon::after { display: none; }
  .governance-grid .glass-card .value-icon img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    border-radius: 0;
  }
  .governance-grid .glass-card h3 {
    margin: 0 0 4px;
    font-size: clamp(.79rem, 2.6vw, 1rem);
    line-height: 1.3;
  }
  .governance-grid .glass-card p {
    font-size: clamp(.68rem, 2.25vw, .82rem);
    line-height: 1.45;
  }

  .leadership {
    min-height: 0;
    padding: 86px 0 62px;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto clamp(270px, 77vw, 440px) auto;
    gap: 0;
  }
  .leadership-bg {
    background-image: url('../assets/leadership-stage-clean.webp');
    background-position: center clamp(175px, 36vw, 270px);
    background-size: auto clamp(350px, 95vw, 540px);
    background-repeat: no-repeat;
  }
  .leadership-overlay {
    background: linear-gradient(180deg, rgba(10, 2, 2, .85), rgba(10, 2, 2, .16) 38%, rgba(10, 2, 2, .48) 60%, #100403 98%);
  }
  .leadership-heading {
    width: calc(100% - 30px);
    max-width: 650px;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    position: relative;
    z-index: 6;
    text-align: center;
  }
  .leadership-heading h2 {
    max-width: 620px;
    margin: 0 auto 14px;
    font-size: clamp(2rem, 8vw, 3.2rem);
    line-height: 1.16;
  }
  .leadership-heading p:last-child {
    max-width: 570px;
    font-size: .91rem;
    line-height: 1.65;
  }
  .leadership .leader-cutout {
    width: 100%;
    height: clamp(270px, 77vw, 440px);
    max-height: none;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    opacity: 1;
    justify-self: center;
    align-self: end;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
    z-index: 2;
  }
  .leadership .ceo-cutout { grid-column: 1; grid-row: 2; }
  .leadership .ceo-cutout { object-fit: cover; object-position: center top; }
  .leadership .ambassador-cutout { grid-column: 2; grid-row: 2; }
  .leadership .leadership-logo {
    width: clamp(100px, 28vw, 155px);
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 4;
    justify-self: center;
    align-self: end;
    transform: none;
    animation: none;
  }
  .leadership .leadership-logo img { width: 100%; }
  .leadership .people-grid {
    width: calc(100% - 28px);
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .leadership .person {
    min-height: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 12px;
    align-items: start;
    border: 1px solid rgba(255, 189, 75, .75);
    border-radius: 21px;
    background: linear-gradient(125deg, rgba(66, 15, 9, .95), rgba(29, 7, 5, .88));
    text-align: left;
  }
  .leadership .person-role { grid-column: 1; grid-row: 1; font-size: .62rem; }
  .leadership .person h3 { grid-column: 1; grid-row: 2; margin: 7px 0 3px; font-size: 1.2rem; line-height: 1.2; }
  .leadership .person h4 { grid-column: 1; grid-row: 3; margin: 0 0 7px; font-size: .78rem; line-height: 1.35; }
  .leadership .person p { grid-column: 1; grid-row: 4; min-height: 0; margin: 0; font-size: .7rem; line-height: 1.5; }
  .leadership .person .video-card {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 155px;
    margin: 0;
    padding: 0 0 27px;
    position: relative;
    display: block;
    border: 0;
    background: none;
  }
  .leadership .person .video-card::before {
    content: "";
    position: absolute;
    inset: 0 0 30px;
    border: 1px solid rgba(255, 196, 82, .8);
    border-radius: 13px;
    background: linear-gradient(0deg, rgba(20, 3, 3, .35), transparent 55%), url('../assets/ceo-macis.webp') center 14% / auto 125% no-repeat, url('../assets/leadership-stage-clean.webp') center / cover no-repeat;
  }
  .leadership .person-ambassador .video-card::before {
    background-image: linear-gradient(0deg, rgba(20, 3, 3, .35), transparent 55%), url('../assets/sergio-sunwin-sports.webp'), url('../assets/leadership-stage-clean.webp');
  }
  .leadership .person .video-play {
    width: 44px;
    height: 44px;
    position: absolute;
    left: 50%;
    top: calc((100% - 30px) / 2);
    z-index: 2;
    transform: translate(-50%, -50%);
  }
  .leadership .person .video-card > span:last-child {
    position: absolute;
    inset: auto 0 0;
    text-align: center;
  }
  .leadership .person .video-card strong {
    font-size: .67rem;
    line-height: 1.25;
  }
  .leadership .person .video-card small { display: none; }
}

@media (max-width: 390px) {
  .global-header .brand-logo,
  .global-header .brand-logo img {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
  body[data-route="/"] .global-header .verify-cta { padding-inline: 8px; font-size: .64rem; }
  body[data-route="/"] .global-header .support { padding-inline: 7px; }
  body[data-route="/"] .global-header .support::after { font-size: .62rem; }
  .governance-grid .glass-card { min-height: 166px; }
  .leadership .person { padding: 14px; }
  .leadership .person p { font-size: .66rem; }
  .leadership .person .video-card { min-height: 148px; }
}