:root{
  --bg: #ffffff;
  --fg: #0b1220;
  --muted: rgba(11,18,32,.68);
  --card: rgba(255,255,255,.85);
  --border: rgba(11,18,32,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.10);

  --accent: #31B332;
  --accent-2: #1F5430;

  --header-bg: rgba(255,255,255,.78);
  --header-border: rgba(11,18,32,.10);
}

html[data-theme="dark"]{
  --bg: #070b12;
  --fg: #e8eefc;
  --muted: rgba(232,238,252,.70);
  --card: rgba(18,24,38,.70);
  --border: rgba(232,238,252,.14);
  --shadow: 0 14px 40px rgba(0,0,0,.35);

  --accent: #31B332;
  --accent-2: #1F5430;

  --header-bg: rgba(10,14,22,.65);
  --header-border: rgba(232,238,252,.10);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 12px; top: 12px; width:auto; height:auto; padding:10px 12px;
  background: var(--card); border:1px solid var(--border); border-radius: 12px;
  z-index: 9999;
}

.container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
  letter-spacing: .2px;
}


.brand-logo{
  width: 50px;    
  height: 50px;
  object-fit: contain; 
  display: block;
}

.brand{ gap: 10px; }

.nav{
  display:flex;
  align-items:center;
  gap: 6px;
}

.nav-link{
  position: relative;
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  transition: transform .12s ease, background .16s ease, color .16s ease;
  outline: none;
}

/* underline animation */
.nav-link::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: -11px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  opacity: .95;
}

.nav-link:hover,
.nav-link:focus-visible{
  background: rgba(127,127,127,.14);
  color: var(--fg);
  transform: translateY(-1px);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  transform: scaleX(1);
}

/* Active = giống hover + underline luôn bật */
.nav-link.active{
  color: var(--fg);
  background: rgba(127,127,127,.18);
}
.nav-link.active::after{
  transform: scaleX(1);
}

/* click down */
.nav-link:active{
  transform: translateY(0px);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-left: 6px;
}

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(127,127,127,.10);
  color: var(--fg);
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(127,127,127,.16); }
.icon-btn:active{ transform: translateY(0px); }

.theme-icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  border-radius: 50%;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
html[data-theme="light"] .theme-icon{
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 56%),
              conic-gradient(from 0deg, #000 0 10%, transparent 10% 20%, #000 20% 30%, transparent 30% 40%, #000 40% 50%, transparent 50% 60%, #000 60% 70%, transparent 70% 80%, #000 80% 90%, transparent 90% 100%);
}
html[data-theme="dark"] .theme-icon{
  mask-image: radial-gradient(circle at 35% 35%, transparent 42%, #000 43%);
}

.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(127,127,127,.10);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  margin: 4px auto;
  border-radius: 2px;
  opacity: .9;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }

  .nav{
    position: fixed;
    top: 64px;
    right: 16px;
    left: 16px;
    display:none;
    flex-direction: column;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    gap: 6px;
  }
  .nav.open{ display:flex; }
  .nav-link{ width: 100%; justify-content: space-between; }
  .nav-link::after{ display:none; }
  .nav-actions{ width: 100%; justify-content: flex-end; margin-left: 0; }
}