* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg-dark: #0f0f1a;
      --bg-card: #1a1a2a;
      --bg-elevated: #24243a;
      --primary: #ffb347;
      --primary-glow: #ff9f2e;
      --text-light: #f0f0f0;
      --text-muted: #a0a0b8;
      --border-dim: rgba(255, 255, 255, 0.08);
      --shadow-xl: 0 20px 35px -12px rgba(0, 0, 0, 0.4);
      --transition: 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
      --focus-ring: 0 0 0 4px rgba(255, 179, 71, 0.16);
    }

    body {
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      background: radial-gradient(circle at 10% 20%, #14141e, #09090f);
      color: var(--text-light);
      padding: 28px 24px;
      min-height: 100vh;
      font-weight: 400;
      font-optical-sizing: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button, input, textarea, .form-input, .navbar-link, .info_more-btn {
      font-family: inherit;
    }

    ion-icon {
      display: inline-flex;
      flex: 0 0 auto;
      height: 1em;
      line-height: 1;
      width: 1em;
    }

    ion-icon svg {
      display: block;
      fill: none;
      height: 100%;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
      width: 100%;
    }

    main {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      animation: shellEnter 0.65s var(--ease-soft) both;
    }

    .site-footer {
      color: var(--text-muted);
      font-size: 0.84rem;
      line-height: 1.5;
      margin: 20px auto 0;
      max-width: 1280px;
      text-align: center;
    }

    /* SIDEBAR */
    .sidebar {
      flex: 1.2;
      min-width: 270px;
      background: rgba(26, 26, 42, 0.75);
      backdrop-filter: blur(12px);
      border-radius: 40px;
      padding: 32px 24px;
      border: 1px solid var(--border-dim);
      box-shadow: var(--shadow-xl);
      height: fit-content;
      position: sticky;
      top: 28px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-soft);
    }

    .sidebar:hover {
      border-color: rgba(255, 179, 71, 0.22);
      box-shadow: 0 26px 48px -18px rgba(0, 0, 0, 0.55);
      transform: translateY(-2px);
    }

    .avatar-box img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary);
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      transition: box-shadow 0.3s ease, transform 0.3s var(--ease-soft);
    }

    .avatar-box picture {
      display: inline-flex;
    }

    .avatar-box a:hover img,
    .avatar-box a:focus-visible img {
      box-shadow: 0 16px 36px -16px rgba(255, 179, 71, 0.9);
      transform: scale(1.035);
    }

    .sidebar-info {
      text-align: center;
    }

    .name {
      font-size: 1.9rem;
      font-weight: 700;
      margin: 18px 0 6px;
      background: linear-gradient(135deg, #fff, var(--primary));
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: 0;
    }

    .title {
      background: rgba(255, 180, 71, 0.18);
      display: inline-block;
      padding: 5px 18px;
      border-radius: 60px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--primary);
      backdrop-filter: blur(4px);
    }

    .info_more-btn {
      background: transparent;
      border: 1px solid var(--border-dim);
      padding: 8px 20px;
      border-radius: 40px;
      color: var(--text-light);
      margin-top: 24px;
      cursor: pointer;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
    }

    .info_more-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #0f0f1a;
      box-shadow: 0 12px 26px -16px rgba(255, 179, 71, 0.95);
      transform: translateY(-2px);
    }

    .info_more-btn:focus-visible,
    .social-link:focus-visible,
    .navbar-link:focus-visible,
    .filter-list button:focus-visible,
    .filter-list .filter-link:focus-visible,
    .page-link:focus-visible,
    .form-btn:focus-visible,
    .post-back-link:focus-visible,
    .download-button:focus-visible {
      box-shadow: var(--focus-ring);
      outline: 1px solid rgba(255, 179, 71, 0.55);
      outline-offset: 3px;
    }

    .sidebar-info_more {
      margin-top: 28px;
      transition: 0.2s;
    }

    .sidebar-info_more[hidden] {
      display: none;
    }

    .separator {
      height: 1px;
      background: var(--border-dim);
      margin: 20px 0;
    }

    .contacts-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .icon-box {
      width: 42px;
      height: 42px;
      background: rgba(255,255,240,0.05);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      color: var(--primary);
    }

    .contact-info p:first-child {
      font-size: 0.7rem;
      opacity: 0.7;
      letter-spacing: 0.5px;
    }

    .contact-link,
    .contact-info time,
    address {
      font-size: 0.85rem;
      color: var(--text-light);
      text-decoration: none;
      font-style: normal;
      font-weight: 500;
    }

    .contact-info {
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
    }

    .private-contact {
      align-items: center;
      display: flex;
      gap: 8px;
      max-width: 100%;
      min-width: 0;
    }

    .private-contact [data-private-value] {
      color: var(--text-light);
      flex: 1 1 auto;
      font-size: 0.85rem;
      font-style: normal;
      font-weight: 500;
      min-width: 0;
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .private-contact.is-hidden [data-private-value] {
      color: var(--text-muted);
      letter-spacing: 0.08em;
    }

    .private-contact-toggle {
      align-items: center;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border-dim);
      border-radius: 11px;
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex;
      flex: 0 0 auto;
      height: 30px;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-soft);
      width: 30px;
    }

    .private-contact-toggle ion-icon {
      font-size: 1rem;
    }

    .private-contact-toggle:hover,
    .private-contact-toggle:focus-visible {
      background: rgba(255, 179, 71, 0.16);
      border-color: rgba(255, 179, 71, 0.45);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .private-contact-toggle:focus-visible {
      box-shadow: var(--focus-ring);
      outline: 1px solid rgba(255, 179, 71, 0.55);
      outline-offset: 3px;
    }

    .social-list {
      display: flex;
      justify-content: center;
      gap: 18px;
      list-style: none;
    }

    .social-link {
      background: rgba(255,255,255,0.05);
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: var(--text-light);
      font-size: 1.2rem;
      transition: var(--transition);
    }

    .social-link:hover {
      background: var(--primary);
      color: #0f0f1a;
      box-shadow: 0 14px 24px -16px rgba(255, 179, 71, 0.9);
      transform: translateY(-4px) scale(1.04);
    }

    .social-link.is-disabled {
      cursor: default;
      opacity: 0.45;
      pointer-events: none;
    }

    /* MAIN CONTENT */
    .main-content {
      flex: 3;
      min-width: 300px;
      background: rgba(20, 20, 30, 0.6);
      backdrop-filter: blur(8px);
      border-radius: 40px;
      padding: 92px 32px 34px;
      border: 1px solid var(--border-dim);
      box-shadow: 0 22px 46px -32px rgba(0, 0, 0, 0.72);
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .main-content:hover {
      border-color: rgba(255, 255, 255, 0.13);
      box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.84);
    }

    /* navbar */
    .navbar {
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      background: linear-gradient(135deg, rgba(36, 36, 58, 0.94), rgba(20, 20, 30, 0.82));
      border: 1px solid var(--border-dim);
      border-radius: 24px;
      box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.85);
      margin: -76px 0 28px auto;
      max-width: calc(100% - 32px);
      padding: 8px 12px 8px 14px;
      position: sticky;
      right: auto;
      top: max(18px, env(safe-area-inset-top));
      width: max-content;
      z-index: 100;
    }

    .navbar-list {
      align-items: center;
      display: grid;
      gap: 6px;
      grid-template-columns: repeat(5, max-content);
      list-style: none;
      margin: 0;
      overflow: visible;
      padding: 0;
    }

    .navbar-item {
      min-width: 0;
    }

    .navbar-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      text-decoration: none;
      background: rgba(255, 255, 255, 0.025);
      border: none;
      border-radius: 999px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 650;
      line-height: 1;
      min-width: 0;
      min-height: 42px;
      overflow: visible;
      padding: 0 13px;
      position: relative;
      white-space: nowrap;
      width: 100%;
      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-soft);
    }

    .navbar-link ion-icon {
      color: currentColor;
      font-size: 1.05rem;
      transition: transform 0.25s var(--ease-soft);
    }

    .navbar-link span {
      display: inline-block;
      min-width: 0;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }

    .navbar-link.active {
      background: linear-gradient(135deg, rgba(255, 179, 71, 0.98), #ffd18a);
      box-shadow: 0 14px 26px -20px rgba(255, 179, 71, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.32);
      color: #151018;
    }

    .navbar-link:hover:not(.active) {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-light);
      transform: translateY(-2px);
    }

    .navbar-link:hover ion-icon,
    .navbar-link:focus-visible ion-icon {
      transform: translateY(-1px);
    }

    /* Articles */
    article {
      display: none;
      animation: fadeUp 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    article.active {
      display: block;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes shellEnter {
      from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .reveal-on-scroll {
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px);
      transition: opacity 0.55s ease, transform 0.55s var(--ease-soft);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    .reveal-on-scroll.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .post-gallery.reveal-on-scroll {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .h2 {
      color: var(--text-light);
      font-size: clamp(1.85rem, 2.4vw, 2.45rem);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.18;
      margin-bottom: 30px;
      max-width: min(100%, 920px);
    }

    .article-title {
      background: linear-gradient(135deg, #ffffff 0%, #f8d99c 48%, #ffb347 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      display: block;
      padding-bottom: 18px;
      position: relative;
      text-wrap: balance;
    }

    .article-title::before {
      background: var(--primary);
      border-radius: 999px;
      box-shadow: 0 0 18px rgba(255, 179, 71, 0.55);
      content: "";
      height: 8px;
      left: 0;
      position: absolute;
      top: calc(100% - 8px);
      width: 8px;
    }

    .article-title::after {
      background: linear-gradient(90deg, var(--primary), rgba(255, 179, 71, 0.2), transparent);
      border-radius: 999px;
      content: "";
      height: 2px;
      left: 16px;
      max-width: min(46vw, 260px);
      position: absolute;
      top: calc(100% - 5px);
      width: 42%;
    }

    .h3,
    .form-title,
    .service-title {
      color: var(--text-light);
      font-weight: 750;
      letter-spacing: 0;
      line-height: 1.28;
    }

    .about-text p {
      color: var(--text-muted);
      margin-bottom: 18px;
      line-height: 1.6;
    }

    /* service + blog + portfolio */
    .service-list, .blog-posts-list, .project-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 24px;
      margin: 28px 0;
      list-style: none;
    }

    .service-item, .blog-post-item, .project-item {
      background: var(--bg-card);
      border-radius: 28px;
      padding: 22px;
      overflow: hidden;
      position: relative;
      transition: transform 0.32s var(--ease-soft), background 0.25s ease, box-shadow 0.32s ease, border-color 0.25s ease;
      border: 1px solid var(--border-dim);
      list-style: none;
      cursor: default;
    }

    .service-item::before,
    .blog-post-item::before,
    .project-item::before {
      background: linear-gradient(90deg, transparent, rgba(255, 179, 71, 0.38), transparent);
      content: "";
      height: 1px;
      left: -30%;
      opacity: 0;
      position: absolute;
      right: -30%;
      top: 0;
      transform: translateX(-35%);
      transition: opacity 0.25s ease, transform 0.55s var(--ease-soft);
    }

    .service-item:hover, .blog-post-item:hover, .project-item:hover,
    .project-item.is-lightbox-trigger:focus-visible {
      border-color: rgba(255, 179, 71, 0.22);
      transform: translateY(-7px);
      background: #28283e;
      box-shadow: 0 20px 42px -18px rgba(0,0,0,0.58);
    }

    .project-item.is-lightbox-trigger:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 6px;
    }

    .service-item:hover::before,
    .blog-post-item:hover::before,
    .project-item:hover::before {
      opacity: 1;
      transform: translateX(35%);
    }

    ul, ol, li {
      list-style: none !important;
    }

    .service-item-title {
      margin: 14px 0 8px;
      font-weight: 600;
      overflow-wrap: break-word;
      text-wrap: wrap;
      width: 100%;
      word-break: normal;
    }

    /* timeline resume */
    .timeline {
      margin-bottom: 40px;
    }
    
    /* Cấu trúc mới cho tiêu đề section (icon trái, text phải) */
    .section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .section-header .icon-box {
      margin-bottom: 0;
    }
    .section-header .h3 {
      margin-bottom: 0;
      font-size: 1.5rem;
      font-weight: 600;
      position: relative;
    }

    .section-header .h3::after {
      background: linear-gradient(90deg, rgba(255, 179, 71, 0.7), transparent);
      border-radius: 999px;
      content: "";
      display: block;
      height: 2px;
      margin-top: 8px;
      width: 72px;
    }

    .timeline-list {
      list-style: none;
      margin-top: 16px;
      padding-left: 0;
    }

    .timeline-item {
      background: var(--bg-card);
      padding: 18px 24px;
      border-radius: 24px;
      margin-bottom: 16px;
      border-left: 5px solid var(--primary);
      list-style: none;
      transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.28s var(--ease-soft);
    }
    .timeline-item:hover {
      box-shadow: 0 14px 32px -24px rgba(0, 0, 0, 0.8);
      transform: translateX(4px);
      background: #25253b;
    }
    .timeline-item span {
      font-size: 0.85rem;
      color: var(--primary);
      font-weight: 500;
      display: inline-block;
      margin-bottom: 6px;
    }
    .timeline-item .timeline-text {
      margin-top: 8px;
      color: var(--text-muted);
      line-height: 1.4;
    }
    /* Đồng bộ style cho skills item */
    .skills-item {
      background: var(--bg-card);
      padding: 18px 24px;
      border-radius: 24px;
      margin-bottom: 16px;
      border-left: 5px solid var(--primary);
      transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.28s var(--ease-soft);
      list-style: none;
    }
    .skills-item:hover {
      box-shadow: 0 14px 32px -24px rgba(0, 0, 0, 0.8);
      transform: translateX(4px);
      background: #25253b;
    }
    .skill-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .skill-level {
      font-size: 0.85rem;
      color: var(--primary);
      font-weight: 500;
      display: inline-block;
      margin-bottom: 6px;
    }
    .skills-item .timeline-text {
      margin-top: 8px;
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* Portfolio filter */
    .filter-list {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px;
      list-style: none;
    }

    .filter-list button,
    .filter-list .filter-link {
      background: rgba(255,255,255,0.05);
      border: none;
      padding: 6px 18px;
      border-radius: 50px;
      color: var(--text-light);
      font-weight: 500;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-soft);
      font-family: inherit;
      display: inline-flex;
      text-decoration: none;
    }

    .filter-list button.active,
    .filter-list button:hover,
    .filter-list .filter-link.active,
    .filter-list .filter-link:hover {
      background: var(--primary);
      color: #0f0f1a;
      box-shadow: 0 12px 24px -18px rgba(255, 179, 71, 0.95);
      transform: translateY(-2px);
    }

    .blog-filter-list,
    .project-filter-list {
      margin-top: -6px;
    }

    .project-item img, .blog-banner-box img {
      width: 100%;
      height: 170px;
      object-fit: cover;
      border-radius: 20px;
      margin-bottom: 14px;
      transform: translateZ(0) scale(1);
      transition: filter 0.35s ease, transform 0.45s var(--ease-soft);
    }

    .project-item picture {
      display: block;
    }

    .blog-banner-box {
      border-radius: 20px;
      overflow: hidden;
    }

    .project-item:hover img,
    .project-item.is-lightbox-trigger:focus-visible img,
    .blog-post-item:hover .blog-banner-box img {
      filter: saturate(1.08) contrast(1.04);
      transform: scale(1.045);
    }

    .blog-post-link {
      color: inherit;
      display: block;
      height: 100%;
      text-decoration: none;
    }

    .blog-post-link:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 6px;
      border-radius: 24px;
    }

    .blog-count,
    .project-count {
      color: var(--text-muted);
      font-size: 0.9rem;
      margin-top: -10px;
    }

    .blog-pagination,
    .project-pagination {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 8px;
    }

    .page-link {
      align-items: center;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border-dim);
      border-radius: 999px;
      color: var(--text-light);
      display: inline-flex;
      font-weight: 700;
      height: 40px;
      justify-content: center;
      min-width: 40px;
      padding: 0 14px;
      text-decoration: none;
      transition: var(--transition);
    }

    .page-link.active,
    .page-link:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #0f0f1a;
      box-shadow: 0 14px 24px -18px rgba(255, 179, 71, 0.95);
      transform: translateY(-2px);
    }

    .project-empty,
    .blog-empty {
      color: var(--text-muted);
      line-height: 1.6;
      margin-top: 16px;
    }

    .post-back-link {
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s ease, transform 0.25s var(--ease-soft);
    }

    .post-back-link:hover {
      color: var(--primary-glow);
      transform: translateX(-3px);
    }

    .post-header .article-title {
      margin-bottom: 14px;
      max-width: none;
      overflow-wrap: break-word;
      text-wrap: wrap;
      width: 100%;
      word-break: normal;
    }

    .post-intro {
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .post-hero,
    .post-media {
      align-items: center;
      border-radius: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 24px 0;
      overflow: visible;
      transition: box-shadow 0.3s ease, transform 0.3s var(--ease-soft);
    }

    .post-media:hover,
    .post-hero:hover {
      box-shadow: 0 18px 42px -26px rgba(0, 0, 0, 0.8);
      transform: translateY(-2px);
    }

    .post-hero img,
    .post-media img {
      width: auto;
      max-width: 100%;
      display: block;
      border-radius: 28px;
      object-fit: contain;
      object-position: center center;
      margin-inline: auto;
      box-shadow: 0 15px 35px -18px rgba(0,0,0,0.6);
    }

    .post-hero img {
      max-height: min(78vh, 760px);
    }

    .post-media img {
      max-height: min(78vh, 760px);
    }

    .post-hero figcaption,
    .post-media figcaption {
      color: var(--text-muted);
      font-size: 0.85rem;
      line-height: 1.6;
      margin-top: 10px;
    }

    .post-body {
      color: var(--text-light);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .post-body h3 {
      color: var(--primary);
      font-size: 1.35rem;
      margin-top: 10px;
    }

    .post-body p,
    .post-list li {
      color: var(--text-muted);
      line-height: 1.85;
    }

    .post-list {
      display: grid;
      gap: 12px;
      padding-left: 0;
    }

    .post-list li {
      background: rgba(255,255,255,0.04);
      border-left: 4px solid var(--primary);
      border-radius: 16px;
      padding: 14px 18px;
    }

    .download-list {
      display: grid;
      gap: 16px;
    }

    .download-box {
      background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
      border: 1px solid var(--border-dim);
      border-radius: 24px;
      display: grid;
      gap: 16px;
      padding: 22px;
      transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-soft);
    }

    .download-box:hover {
      border-color: rgba(255, 179, 71, 0.22);
      box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.82);
      transform: translateY(-2px);
    }

    .download-info {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .download-kicker {
      color: var(--primary);
      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .download-box h3 {
      color: var(--text-light);
      line-height: 1.35;
      margin: 0;
      overflow-wrap: break-word;
      text-wrap: wrap;
      width: 100%;
      word-break: normal;
    }

    .download-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .download-meta span {
      background: rgba(255,255,255,0.07);
      border: 1px solid var(--border-dim);
      border-radius: 999px;
      color: var(--text-muted);
      font-size: 0.82rem;
      font-weight: 700;
      padding: 5px 10px;
    }

    .download-button {
      align-items: center;
      background: var(--primary);
      border: 0;
      border-radius: 999px;
      color: #0f0f1a;
      cursor: pointer;
      display: inline-flex;
      font-weight: 800;
      gap: 9px;
      justify-content: center;
      justify-self: start;
      min-height: 44px;
      padding: 11px 18px;
      transition: box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s var(--ease-soft);
    }

    .download-button ion-icon {
      font-size: 1.25rem;
    }

    .download-button:not(:disabled):hover {
      box-shadow: 0 14px 28px -18px rgba(255, 179, 71, 0.95);
      transform: translateY(-2px);
    }

    .download-button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none;
    }

    .download-status {
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.55;
      margin: 0;
    }

    .post-video-list {
      display: grid;
      gap: 24px;
    }

    .post-video,
    .post-video video {
      width: 100%;
      border: 0;
      border-radius: 28px;
      display: block;
      overflow: hidden;
    }

    .post-video {
      aspect-ratio: var(--post-video-aspect-ratio, 16 / 9);
      background: #05050a;
      box-shadow: 0 15px 35px -18px rgba(0,0,0,0.6);
      margin: 24px 0;
      max-width: 100%;
    }

    .post-video-list .post-video,
    .post-video-list .post-video-placeholder {
      margin-top: 0;
      margin-bottom: 0;
    }

    .post-video.is-portrait,
    .post-video-placeholder.is-portrait {
      margin-left: auto;
      margin-right: auto;
      max-width: min(100%, 430px);
    }

    .post-video video {
      height: 100%;
      object-fit: contain;
      background: #05050a;
    }

    .post-video-placeholder {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dim);
      border-radius: 28px;
      overflow: hidden;
      margin: 24px 0;
    }

    .post-video-placeholder img {
      width: 100%;
      max-height: min(70vh, 520px);
      display: block;
      object-fit: contain;
      object-position: center center;
      background: #05050a;
    }

    .post-video-placeholder.is-portrait img {
      aspect-ratio: var(--post-video-aspect-ratio, 9 / 16);
      max-height: none;
    }

    .post-video-placeholder p {
      color: var(--text-muted);
      line-height: 1.7;
      padding: 18px 20px;
    }

    .post-gallery {
      display: grid;
      gap: 18px;
    }

    .post-image-open {
      appearance: none;
      align-items: center;
      background: transparent;
      border: 0;
      color: inherit;
      display: flex;
      font: inherit;
      justify-content: center;
      line-height: 0;
      margin-inline: auto;
      max-width: 100%;
      padding: 0;
      width: fit-content;
    }

    .post-image-open img {
      height: auto;
      margin-inline: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center center;
      transition: transform 0.35s var(--ease-soft), filter 0.25s ease;
    }

    .post-image-open:hover img,
    .post-image-open:focus-visible img {
      filter: brightness(1.08);
      transform: scale(1.018);
    }

    .post-image-open:focus-visible {
      border-radius: 28px;
      outline: 2px solid var(--primary);
      outline-offset: 6px;
    }

    body.lightbox-open {
      overflow: hidden;
    }

    .image-lightbox {
      align-items: center;
      background: rgba(5, 5, 10, 0.92);
      backdrop-filter: blur(10px);
      display: flex;
      inset: 0;
      justify-content: center;
      padding: 28px;
      position: fixed;
      z-index: 9999;
    }

    .image-lightbox[hidden] {
      display: none;
    }

    .image-lightbox-content {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      max-height: 88vh;
      max-width: min(94vw, 1320px);
    }

    .image-lightbox-viewport {
      align-items: center;
      border-radius: 18px;
      cursor: zoom-in;
      display: flex;
      justify-content: center;
      max-height: calc(100vh - 128px);
      max-width: 100%;
      overflow: hidden;
      touch-action: none;
    }

    .image-lightbox.is-zoomed .image-lightbox-viewport {
      cursor: grab;
    }

    .image-lightbox.is-dragging .image-lightbox-viewport {
      cursor: grabbing;
    }

    .image-lightbox-content img {
      background: #05050a;
      border-radius: 18px;
      display: block;
      max-height: calc(100vh - 128px);
      max-width: 100%;
      object-fit: contain;
      object-position: center center;
      box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
      transform-origin: center;
      transition: transform 0.2s ease;
      user-select: none;
      will-change: transform;
    }

    .image-lightbox.is-dragging .image-lightbox-content img {
      transition: none;
    }

    .image-lightbox-content figcaption {
      color: var(--text-light);
      font-size: 0.92rem;
      line-height: 1.5;
      max-width: min(90vw, 900px);
      text-align: center;
    }

    .image-lightbox-controls {
      display: flex;
      gap: 10px;
      left: 24px;
      position: fixed;
      top: 24px;
      z-index: 1;
    }

    .image-lightbox-control,
    .image-lightbox-close {
      align-items: center;
      background: rgba(255,255,255,0.1);
      border: 1px solid var(--border-dim);
      border-radius: 50%;
      color: var(--text-light);
      cursor: pointer;
      display: inline-flex;
      height: 46px;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
      width: 46px;
    }

    .image-lightbox-close {
      position: fixed;
      right: 24px;
      top: 24px;
      z-index: 1;
    }

    .image-lightbox-control:disabled {
      cursor: not-allowed;
      opacity: 0.45;
      transform: none;
    }

    .image-lightbox-control ion-icon,
    .image-lightbox-close ion-icon {
      font-size: 1.7rem;
    }

    .image-lightbox-control:not(:disabled):hover,
    .image-lightbox-control:not(:disabled):focus-visible,
    .image-lightbox-close:hover,
    .image-lightbox-close:focus-visible {
      background: var(--primary);
      color: #0f0f1a;
      outline: none;
      transform: translateY(-2px);
    }

    .playlist-box {
      background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
      border: 1px solid var(--border-dim);
      border-radius: 24px;
      display: grid;
      gap: 18px;
      padding: 22px;
      transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-soft);
    }

    .playlist-box:hover {
      border-color: rgba(255, 179, 71, 0.2);
      box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.82);
      transform: translateY(-2px);
    }

    .playlist-player {
      display: grid;
      gap: 16px;
    }

    .playlist-now-playing {
      align-items: center;
      display: grid;
      gap: 16px;
      grid-template-columns: 92px minmax(0, 1fr);
    }

    .playlist-cover {
      align-items: center;
      aspect-ratio: 1;
      background: rgba(0,0,0,0.28);
      border: 1px solid var(--border-dim);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      width: 92px;
    }

    .playlist-cover img {
      display: block;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .playlist-cover ion-icon {
      color: var(--primary);
      font-size: 2rem;
    }

    .playlist-current {
      min-width: 0;
    }

    .playlist-kicker {
      color: var(--primary);
      display: block;
      font-size: 0.76rem;
      font-weight: 700;
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    .playlist-current h3 {
      color: var(--text-light);
      font-size: 1.25rem;
      line-height: 1.35;
      margin: 0;
      overflow-wrap: anywhere;
    }

    .playlist-current p,
    .playlist-status {
      color: var(--text-muted);
      line-height: 1.55;
    }

    .playlist-current p {
      font-size: 0.92rem;
      margin-top: 4px;
      overflow-wrap: anywhere;
    }

    .playlist-progress-wrap {
      align-items: center;
      display: grid;
      gap: 10px;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .playlist-progress-wrap span {
      color: var(--text-muted);
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
      text-align: center;
    }

    .playlist-progress {
      accent-color: var(--primary);
      cursor: pointer;
      height: 6px;
      min-width: 0;
      width: 100%;
    }

    .playlist-progress:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .playlist-controls {
      align-items: center;
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .playlist-control-btn,
    .playlist-play-btn {
      align-items: center;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .playlist-control-btn {
      background: rgba(255,255,255,0.08);
      color: var(--text-light);
      height: 42px;
      width: 42px;
    }

    .playlist-play-btn {
      background: var(--primary);
      box-shadow: 0 10px 24px -12px rgba(255, 179, 71, 0.8);
      color: #0f0f1a;
      height: 56px;
      width: 56px;
    }

    .playlist-control-btn ion-icon,
    .playlist-play-btn ion-icon {
      font-size: 1.45rem;
    }

    .playlist-control-btn:hover,
    .playlist-play-btn:hover {
      transform: translateY(-2px);
    }

    .playlist-control-btn:hover {
      background: rgba(255,255,255,0.14);
    }

    .playlist-control-btn:focus-visible,
    .playlist-play-btn:focus-visible,
    .playlist-track:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .playlist-play-btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none;
    }

    .playlist-status {
      font-size: 0.85rem;
      margin: 0;
      min-height: 1.4em;
      text-align: center;
    }

    .playlist-list {
      display: grid;
      gap: 8px;
      max-height: min(52vh, 460px);
      overflow-y: auto;
      padding-right: 6px;
      scrollbar-color: rgba(255, 179, 71, 0.75) rgba(255,255,255,0.08);
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      overscroll-behavior: contain;
    }

    .playlist-list::-webkit-scrollbar {
      width: 8px;
    }

    .playlist-list::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.07);
      border-radius: 999px;
    }

    .playlist-list::-webkit-scrollbar-thumb {
      background: rgba(255, 179, 71, 0.72);
      border-radius: 999px;
    }

    .playlist-list::-webkit-scrollbar-thumb:hover {
      background: var(--primary);
    }

    .playlist-track {
      align-items: center;
      background: rgba(0,0,0,0.18);
      border: 1px solid transparent;
      border-radius: 16px;
      color: inherit;
      cursor: pointer;
      display: grid;
      gap: 12px;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      padding: 12px 14px;
      text-align: left;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      width: 100%;
    }

    .playlist-track:hover,
    .playlist-track.active {
      background: rgba(255, 179, 71, 0.12);
      border-color: rgba(255, 179, 71, 0.35);
    }

    .playlist-track:hover {
      transform: translateX(3px);
    }

    .playlist-track-index,
    .playlist-track-duration {
      color: var(--text-muted);
      font-size: 0.82rem;
      font-variant-numeric: tabular-nums;
    }

    .playlist-track-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .playlist-track-title {
      color: var(--text-light);
      font-weight: 700;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .playlist-track small {
      color: var(--text-muted);
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .playlist-track.is-unavailable {
      opacity: 0.72;
    }

    .post-footer {
      border-top: 1px solid var(--border-dim);
      margin-top: 28px;
      padding-top: 20px;
    }

    .project-title, .blog-item-title {
      color: var(--text-light);
      font-size: 1.18rem;
      margin-bottom: 6px;
      font-weight: 750;
      letter-spacing: 0;
      line-height: 1.35;
      max-width: none;
      overflow-wrap: break-word;
      text-wrap: wrap;
      transition: color 0.2s ease;
      width: 100%;
      word-break: normal;
    }

    .project-item:hover .project-title,
    .blog-post-item:hover .blog-item-title {
      color: #ffd18a;
    }

    .form-title,
    .service-title {
      align-items: center;
      display: inline-flex;
      gap: 10px;
      margin-bottom: 18px;
    }

    .form-title::before,
    .service-title::before {
      background: var(--primary);
      border-radius: 999px;
      box-shadow: 0 0 14px rgba(255, 179, 71, 0.46);
      content: "";
      height: 8px;
      flex: 0 0 8px;
      width: 8px;
    }

    .project-category {
      color: var(--primary);
      font-size: 0.8rem;
    }

    /* contact */
    .mapbox iframe {
      width: 100%;
      border-radius: 28px;
      height: 280px;
      border: none;
      margin-bottom: 28px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .contact-location {
      align-items: center;
      background: var(--bg-card);
      border: 1px solid var(--border-dim);
      border-radius: 24px;
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
      padding: 20px;
    }

    .contact-location .h3 {
      font-size: 1.15rem;
      margin-bottom: 6px;
    }

    .contact-location p {
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .location-link {
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
    }

    .location-link:hover,
    .location-link:focus-visible {
      color: #ffd18a;
      outline: none;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .input-wrapper {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .form-input {
      flex: 1;
      background: rgba(0,0,0,0.4);
      border: 1px solid var(--border-dim);
      padding: 14px 20px;
      border-radius: 50px;
      color: white;
      font-family: inherit;
      outline: none;
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-soft);
    }

    .form-input:focus {
      background: rgba(0, 0, 0, 0.52);
      border-color: var(--primary);
      box-shadow: var(--focus-ring);
      transform: translateY(-1px);
    }

    .form-input::placeholder {
      color: rgba(255,255,255,0.5);
      font-family: inherit;
    }

    textarea.form-input {
      min-height: 140px;
      border-radius: 24px;
      line-height: 1.5;
      resize: vertical;
    }

    .form-btn {
      background: var(--primary);
      border: none;
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      cursor: pointer;
      transition: box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s var(--ease-soft);
      color: #0f0f1a;
      font-family: inherit;
    }

    .form-btn:not(:disabled):hover {
      box-shadow: 0 14px 28px -18px rgba(255, 179, 71, 0.95);
      transform: translateY(-2px);
    }

    .form-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .form-btn.is-sending {
      opacity: 0.75;
    }

    .form-status {
      min-height: 1.4em;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .form-status.is-success {
      color: #7fe38f;
    }

    .form-status.is-error {
      color: #ff9b9b;
    }

    .back-to-top {
      align-items: center;
      background: rgba(255, 179, 71, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      bottom: max(24px, env(safe-area-inset-bottom));
      box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.72);
      color: #0f0f1a;
      cursor: pointer;
      display: inline-flex;
      height: 48px;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      right: max(24px, env(safe-area-inset-right));
      transform: translateY(14px) scale(0.94);
      transition: opacity 0.22s ease, transform 0.28s var(--ease-soft), box-shadow 0.25s ease, background 0.2s ease;
      width: 48px;
      z-index: 120;
    }

    .back-to-top.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
      background: #ffd18a;
      box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.82);
      outline: none;
      transform: translateY(-2px) scale(1.03);
    }

    .back-to-top ion-icon {
      font-size: 1.35rem;
    }

    /* Blog meta */
    .blog-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .blog-category {
      color: var(--primary);
      font-weight: 700;
      transition: color 0.2s ease;
    }

    .blog-post-item:hover .blog-category {
      color: #ffd18a;
    }
    .dot {
      display: none !important;
    }
    .blog-meta span:not(.blog-category) {
      display: none;
    }
    .blog-meta time {
      display: inline-block;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }

      main {
        animation: none;
      }

      .reveal-on-scroll {
        opacity: 1;
        transform: none;
      }
    }

    /* Tablet / narrow viewport */
    @media (min-width: 751px) and (max-width: 900px) {
      main {
        gap: 28px;
        flex-direction: column;
      }

      .main-content {
        padding: 28px;
      }

      .navbar {
        background: rgba(20, 20, 30, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.76);
        left: auto;
        margin: -4px 0 28px;
        max-width: 100%;
        padding: 7px;
        position: sticky;
        right: auto;
        top: 18px;
        width: 100%;
        z-index: 100;
      }

      .navbar-list {
        gap: 6px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .navbar-link {
        border-radius: 18px;
        flex-direction: column;
        font-size: 0.78rem;
        gap: 5px;
        line-height: 1.08;
        min-height: 60px;
        padding: 7px 4px;
        white-space: normal;
      }

      .navbar-link span {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
      }

      .navbar-link ion-icon {
        font-size: 1.18rem;
      }

      .navbar-link:hover:not(.active) {
        transform: none;
      }

      .filter-list {
        gap: 8px;
      }

      .filter-list button,
      .filter-list .filter-link {
        padding: 6px 14px;
      }

      .sidebar {
        position: static;
      }
    }

    /* Responsive mobile */
    @media (max-width: 750px) {
      html,
      body {
        max-width: 100%;
        overflow-x: clip;
      }

      body {
        --mobile-gutter: clamp(14px, 3.8vw, 18px);
        padding: 0;
        width: 100%;
      }
      main {
        flex-direction: column;
        gap: 20px;
        margin: 0;
        max-width: 100%;
        min-width: 0;
        padding: var(--mobile-gutter);
        width: 100%;
      }
      .sidebar {
        flex: none;
        max-width: 100%;
        min-width: 0;
        position: static;
        text-align: center;
        padding: 24px 18px;
        width: 100%;
      }
      .title,
      .info_more-btn {
        max-width: 100%;
      }
      .navbar {
        background: rgba(20, 20, 30, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 22px;
        bottom: auto;
        box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.82);
        left: auto;
        margin: -8px 0 24px;
        max-width: 100%;
        min-width: 0;
        padding: 6px;
        position: sticky;
        right: auto;
        top: max(10px, env(safe-area-inset-top));
        width: 100%;
        z-index: 100;
      }
      .navbar-list {
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-content: stretch;
        overflow: visible;
      }
      .navbar-item {
        min-width: 0;
      }
      .navbar-link {
        border-radius: 18px;
        flex-direction: column;
        font-size: 0.72rem;
        gap: 4px;
        line-height: 1.05;
        min-height: 58px;
        padding: 7px 4px;
        white-space: normal;
        width: 100%;
      }
      .site-footer {
        max-width: 100%;
        padding-inline: var(--mobile-gutter);
      }
      .navbar-link span {
        max-width: 100%;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
      }
      .navbar-link ion-icon {
        font-size: 1.18rem;
      }
      .navbar-link:hover:not(.active) {
        transform: none;
      }
      .main-content {
        flex: none;
        max-width: 100%;
        min-width: 0;
        padding: 24px 18px;
        width: 100%;
      }
      .h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
      }
      .service-list, .blog-posts-list, .project-list {
        gap: 16px;
      }
      .service-item, .blog-post-item, .project-item {
        padding: 16px;
      }
      .project-item img, .blog-banner-box img {
        height: 150px;
      }
      .input-wrapper {
        flex-direction: column;
        gap: 12px;
      }
      .form-btn {
        width: 100%;
        justify-content: center;
      }
      .download-box {
        padding: 18px;
      }
      .download-button {
        justify-self: stretch;
      }
      .mapbox iframe {
        height: 220px;
      }
      .playlist-box {
        padding: 18px;
      }
      .playlist-list {
        max-height: min(48vh, 360px);
      }
      .playlist-now-playing {
        grid-template-columns: 74px minmax(0, 1fr);
      }
      .playlist-cover {
        border-radius: 16px;
        width: 74px;
      }
      .playlist-track {
        grid-template-columns: 32px minmax(0, 1fr);
      }
      .playlist-track-duration {
        grid-column: 2;
      }
      .image-lightbox {
        padding: 16px;
      }
      .image-lightbox-viewport {
        border-radius: 14px;
        max-height: calc(100vh - 96px);
      }
      .image-lightbox-content img {
        border-radius: 14px;
        max-height: calc(100vh - 96px);
      }
      .image-lightbox-controls {
        gap: 8px;
        left: 16px;
        top: 16px;
      }
      .image-lightbox-control,
      .image-lightbox-close {
        height: 42px;
        width: 42px;
      }
      .image-lightbox-close {
        right: 16px;
        top: 16px;
      }
      .back-to-top {
        bottom: max(18px, env(safe-area-inset-bottom));
        height: 44px;
        right: max(18px, env(safe-area-inset-right));
        width: 44px;
      }
    }

    /* Mobile nhỏ hơn (dưới 480px) */
    @media (max-width: 480px) {
      .sidebar {
        border-radius: 32px;
        padding-inline: 16px;
      }
      .main-content {
        border-radius: 32px;
        padding-inline: 14px;
      }
      .name {
        font-size: 1.5rem;
      }
      .title {
        font-size: 0.75rem;
      }
      .navbar-link {
        border-radius: 16px;
        font-size: 0.66rem;
        min-height: 54px;
        padding: 6px 2px;
      }
      .navbar-link ion-icon {
        font-size: 1.1rem;
      }
      .h2 {
        font-size: 1.5rem;
      }
      .blog-meta {
        font-size: 0.7rem;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 400px) {
      body {
        --mobile-gutter: 12px;
      }
      .sidebar {
        border-radius: 28px;
        padding-inline: 14px;
      }
      .navbar {
        border-radius: 20px;
        padding: 5px;
      }
      .navbar-list {
        gap: 3px;
      }
      .navbar-link {
        border-radius: 15px;
        font-size: 0.62rem;
        min-height: 52px;
        padding-inline: 1px;
      }
      .main-content {
        border-radius: 28px;
        padding-inline: 12px;
      }
    }

    .about-text p, .blog-text, .timeline-text, .service-item-text, p, span, li, button, a {
      font-feature-settings: "cv01", "cv02", "cv03";
    }