body {
      min-height: 100vh;
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: url("../img/background-nuoc-ngoc-tuan.jpg") no-repeat center center fixed;
      background-size: cover;
      color: #fff;
    }

    /* Lớp phủ mờ để chữ dễ đọc hơn (có thể bỏ nếu không cần) */
    .bg-overlay {
      background: rgba(0, 0, 80, 0.2);
      min-height: 100vh;
    }

    /* Logo góc trên trái */
    .logo-wrapper img {
      max-height: 70px;
    }

    /* Vùng nội dung trung tâm */
    .main-wrapper {
		align-items: center;
		min-height: calc(100vh - 170px); /* chừa chỗ cho footer */
    }

    /* Tiêu đề */
    .main-title {
      letter-spacing: 2px;
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    }

    /* Các ô menu */
	.main-menu {
		max-width: 1000px;
	}
    .menu-card {
      background: rgba(0, 0, 80, 0.55);
      border-radius: 18px;
      padding: 25px 10px;
      cursor: pointer;
      transition: all 0.25s ease-in-out;
      box-shadow: 0 8px 18px rgba(0,0,0,0.4);
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-weight: 600;
    }

    .menu-card:hover {
      background: rgba(0, 0, 120, 0.75);
      transform: translateY(-6px);
      box-shadow: 0 12px 26px rgba(0,0,0,0.55);
    }

    /* Footer */
    footer {
      font-size: 0.85rem;
      text-align: center;
      color: #f5f5f5;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    @media (max-width: 767.98px) {
      .main-title {
        font-size: 1.1rem;
      }
    }