/* Scope toàn bộ style chỉ trong .yy-topnav */
.yy-topnav {
    --nav-bg: #0b1220;       /* nền menu */
    --nav-fg: #e5e7eb;       /* chữ menu */
    --nav-accent: #22d3ee;   /* màu brand */
    --nav-height: 64px;      /* chiều cao menu */
    --wrap-max: 1100px;
  
    color: #0f172a;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    display: flex;
    flex-direction: column;
    max-width: 1920px;
    margin: 0 auto;
  }
  
  /* Demo hero (có thể xóa) */
  .yy-topnav .hero{
     display:grid; text-align:center;  color:white;
  }
  .yy-topnav .hero h1{ margin:0 0 8px; font-size:clamp(22px,4vw,40px); }
  .yy-topnav .hero p{ margin:0; color:#a5b4fc; }
  
  /* Sentinel */
  .yy-topnav #menu-sentinel{ height:1px; }
  
  /* Menu sticky */
  .yy-topnav .menu-wrapper{
    position: sticky; top: 0; z-index: 1000;
    height: var(--nav-height);
    background: #ffe9d9; color: var(--nav-fg);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center;
    transition: box-shadow .2s ease, background-color .2s ease, backdrop-filter .2s ease;
  }
  .yy-topnav .menu-wrapper.is-stuck{
    box-shadow: 0 8px 28px rgba(2,6,23,.35);
    background: #fff1e5fc;
    backdrop-filter: blur(6px);
  }
  
  .yy-topnav .container{
    width: 100%; max-width: var(--wrap-max); margin:0 auto; padding:0 16px;
    display:flex; align-items:center; gap:12px;
  }
  .yy-topnav .brand{
    margin-right: auto; font-weight: 900; letter-spacing:.5px;
    color: #c1272d; font-size: 18px; text-decoration: none;
  }
  .yy-topnav .nav{
    list-style: none; margin:0; padding:0; display:flex; align-items:center; gap:8px;
  }
  .yy-topnav .nav a{
    color: #c1272d; text-decoration:none; 
    display:inline-block; padding:10px 14px; border-radius:10px; letter-spacing:.2px;
  }
  .yy-topnav .nav a:hover{ background: rgba(255,255,255,.08); }
  
  /* Nội dung & offset khi cuộn tới anchor */
  .yy-topnav main{ display:block; }
  .yy-topnav section{
    padding: 72px 16px;
    max-width: var(--wrap-max);
    margin: 0 auto;
    scroll-margin-top: calc(var(--nav-height) + 12px);
  }
  .yy-topnav section h2{ margin:0 0 12px; font-size:clamp(20px,3vw,32px); }
  /* .yy-topnav .card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 8px 22px rgba(2,6,23,.06); } */
  
  /* Mobile */
  @media (max-width:680px){
    .yy-topnav { --nav-height: 56px; }
    .yy-topnav .nav{ overflow-x:auto; white-space:nowrap; gap:6px; }
    .yy-topnav .brand{ display:none; }
    .yy-topnav section{padding: 10px;}
  }