\n:root {\n  --primary-color: #1E90FF;\n  --secondary-color: #32CD32;\n  --accent-color: #FFA500;\n  --background-color: #F5F5F5;\n  --text-color: #333;\n  --card-bg: #FFFFFF;\n  --shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto', sans-serif;\n  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);\n  color: var(--text-color);\n  line-height: 1.6;\n  padding: 0;\n  margin: 0;\n  min-height: 100%;\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.header {\n  text-align: center;\n  padding: 40px 0;\n  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n  color: white;\n  border-radius: 0 0 20px 20px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n  margin-bottom: 40px;\n  position: relative;\n  overflow: hidden;\n}\n\n.header::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: url('https://images.gptkong.com/demo/sample1.png') center/cover no-repeat;\n  opacity: 0.1;\n  z-index: 0;\n}\n\n.header h1 {\n  font-size: 2.5rem;\n  margin-bottom: 15px;\n  position: relative;\n  z-index: 1;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.header p {\n  font-size: 1.2rem;\n  max-width: 800px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n.notice {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: var(--primary-color);\n  padding: 10px 20px;\n  border-radius: 30px;\n  display: inline-block;\n  margin-top: 20px;\n  font-weight: bold;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  position: relative;\n  z-index: 1;\n}\n\n.nav-tabs {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 30px;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.nav-tab {\n  padding: 12px 25px;\n  background: white;\n  border-radius: 30px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  font-weight: 500;\n  box-shadow: 0 4px 8px var(--shadow-color);\n  position: relative;\n  overflow: hidden;\n}\n\n.nav-tab::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background: var(--primary-color);\n  transform: scaleX(0);\n  transition: transform 0.3s ease;\n}\n\n.nav-tab:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 6px 12px var(--shadow-color);\n}\n\n.nav-tab:hover::after {\n  transform: scaleX(1);\n}\n\n.nav-tab.active {\n  background: var(--primary-color);\n  color: white;\n}\n\n.nav-tab.active::after {\n  background: white;\n  transform: scaleX(1);\n}\n\n.content-section {\n  background-color: var(--card-bg);\n  border-radius: 15px;\n  padding: 30px;\n  margin-bottom: 30px;\n  box-shadow: 0 10px 20px var(--shadow-color);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.content-section:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\n}\n\n.content-section h2 {\n  color: var(--primary-color);\n  margin-bottom: 20px;\n  font-size: 1.8rem;\n  position: relative;\n  padding-bottom: 10px;\n}\n\n.content-section h2::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 50px;\n  height: 3px;\n  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n  border-radius: 3px;\n}\n\n.content-section h3 {\n  color: var(--secondary-color);\n  margin: 25px 0 15px;\n  font-size: 1.4rem;\n}\n\n.content-section p {\n  margin-bottom: 15px;\n  font-size: 1.1rem;\n}\n\n.img-container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin: 30px 0;\n  justify-content: center;\n}\n\n.img-box {\n  width: 300px;\n  height: 300px;\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 8px 16px var(--shadow-color);\n  transition: all 0.3s ease;\n  position: relative;\n}\n\n.img-box:hover {\n  transform: scale(1.05);\n  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\n}\n\n.img-box img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.5s ease;\n}\n\n.img-box:hover img {\n  transform: scale(1.1);\n}\n\n.code-container {\n  background: #282c34;\n  border-radius: 10px;\n  padding: 20px;\n  margin: 25px 0;\n  overflow-x: auto;\n}\n\npre {\n  color: #abb2bf;\n  font-family: 'Courier New', monospace;\n  font-size: 0.95rem;\n  line-height: 1.5;\n  margin: 0;\n}\n\ncode {\n  display: block;\n  white-space: pre;\n}\n\n.highlight {\n  color: var(--accent-color);\n  font-weight: bold;\n}\n\n.footer {\n  text-align: center;\n  padding: 30px 0;\n  margin-top: 50px;\n  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n  color: white;\n  border-radius: 20px 20px 0 0;\n}\n\n@media (max-width: 768px) {\n  .header h1 {\n    font-size: 2rem;\n  }\n  \n  .header p {\n    font-size: 1rem;\n  }\n  \n  .nav-tabs {\n    flex-direction: column;\n    align-items: center;\n  }\n  \n  .nav-tab {\n    width: 100%;\n    text-align: center;\n  }\n  \n  .content-section {\n    padding: 20px;\n  }\n  \n  .img-box {\n    width: 100%;\n    max-width: 300px;\n  }\n}\n\n@keyframes float {\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.floating {\n  animation: float 3s ease-in-out infinite;\n}\n