/*!
Theme Name: GuxBase
Theme URI: http://underscores.me/
Author: GuxPlus
Author URI: https://guxplus.com/
Description: Gux team
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gux_base
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

GuxBase is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'Manrope';
	src: url('./assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }

  @font-face {
	font-family: 'SVN-Helga';
	src: url('./assets/fonts/SVN-Helga.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }

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

  html, body {
	font-family: "Manrope", sans-serif;
	background-color: #FFF;
	width: 100%;
	overflow-x: hidden;
  }

  /* Navbar styles */
  .navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFF;
  }

  .logo img {
	height: 36px;
  }

  .nav-links {
	list-style: none;
	display: flex;
	gap: 5px;
	align-items: center;
  }

  .nav-links li {
	position: relative;
  }

  .nav-links a {
	text-decoration: none;
	color: #253739;
	font-weight: 500;
	padding: 8px;
	font-size: 16px;
  }

  .nav-links .dropdown:hover .dropdown-menu {
	display: block;
  }

  .dropdown-menu {
	display: none;
	position: absolute;
	top: 36px;
	left: 0;
	background-color: white;
	border: 1px solid #eee;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	border-radius: 6px;
	z-index: 100;
	list-style: none;
  }

  .dropdown-menu li {
	padding: 10px 20px;
	white-space: nowrap;
  }

  .dropdown-menu li a {
	color: #333;
  }

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

  .search-box {
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid #ccc;
	outline: none;
	width: 345px;
  }

  .nav-right i {
	font-size: 18px;
	cursor: pointer;
  }

  .cart-icon {
	position: relative;
  }

  .cart-badge {
	position: absolute;
	top: 9px;
	right: -9px;
	background-color: red;
	color: white;
	font-size: 10px;
	font-weight: bold;
	border-radius: 50%;
	padding: 2px 6px;
  }

  /* Hero Section */
  .hero-section {
	/* background: url("./assets/images/blur-field-texture 1.png") no-repeat center center/cover; */
	color: #fff;
	position: relative;
  }

  .hero {
	color: #fff;
	max-width: 800px;
  }

  .hero h1 {
	font-weight: 600;
	margin-bottom: 10px;
  }

  .hero .subtitle {
	font-style: normal;
	font-family: 'SVN-Helga', cursive;
	margin-bottom: 20px;
  }

  .features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
  }

  .features li {
	margin: 10px 0;
	display: flex;
	align-items: center;
	font-size: 16px;
  }

  .features li img{
	margin-right: 10px;
  }

  .cta {
	background: #FCF9EA;
	border: none;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	color: #177F40;
  }

  /* Hero Image Section */
  .hero-image {
	position: relative;
  }

  .hero-image img {
	border-radius: 10px;
  }

  .btn-primary, .btn-secondary {
	display: inline-block;
	padding: 12px 24px;
	margin-top: 20px;
	text-decoration: none;
	color: white;
	background-color: #388e3c;
	border-radius: 6px;
  }

  .section {
	display: flex;
	align-items: center;
  }

  .image-wrapper {
	position: relative;
	width: 400px;
	height: auto;
	overflow: hidden;
  }

  .image-wrapper img {
	width: 100%;
  }

  .content {
	padding: 40px 40px 40px 80px;
  }

  .content h2 {
	font-size: 40px;
	margin-bottom: 20px;
  }

  .content p {
	margin-bottom: 10px;
	line-height: 1.4;
  }

  .create-billing {
	padding: 8px 32px;
	border: none;
	border-radius: 30px;
	background: #FCF9EA;
	cursor: pointer;
	color: #177F40;
	font-weight: 500;
	font-size: 16px;
	margin-top: 20px;
	width: 177px;
  }

  .section-3 {
	background: linear-gradient(259.48deg, rgba(26, 202, 96, 0.3) 21.79%, rgba(36, 170, 75, 0.3) 108.03%);
  }

  .section-3 img {
	margin: 0 auto;
  }

  .progress-container {
	display: flex;
	align-items: center;
	width: 80%;
	max-width: 820px;
	margin-bottom: 20px;
  }

  .step {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	border: 2px solid #00a83f;
	color: #00a83f;
	font-weight: 600;
	font-size: 32px;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	z-index: 1;
  }

  .line {
	flex: 1;
	height: 2px;
	background: #00a83f;
	margin: 0 -1px; /* dính sát vòng tròn */
  }

  .items {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
  }

  .items > div {
	background: #c8e6c9;
	padding: 15px;
	border-radius: 8px;
	flex: 1 1 40%;
	text-align: center;
  }

  /* Form đăng ký */
  .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 20px;
	min-height: 650px;
  }

  .form-box {
	width: 100%;
	max-width: 470px;
	padding: 40px;
	border-radius: 10px;
  }

  .form-box h2 {
	margin-bottom: 40px;
	font-size: 40px;
	font-weight: 600;
	text-align: center;
  }

  .form-box label {
	width: 100%;
	border-radius: 5px;
	font-size: 14px;
  }

  .form-box input {
	width: 100%;
	padding: 12px;
	margin: 8px 0;
	border: 1px solid #ddd;
	border-radius: 5px;
  }

  .form-box button {
	width: 100%;
	padding: 12px;
	background: linear-gradient(90deg, #28a745, #06c755);
	border: none;
	color: #fff;
	font-size: 16px;
	border-radius: 25px;
	cursor: pointer;
	transition: 0.3s;
	margin-top: 40px;
  }

  .form-box button:hover {
	background: linear-gradient(90deg, #06c755, #28a745);
  }

  .form-box p {
	margin-top: 30px;
	font-size: 14px;
	text-align: center;
  }

  .form-box p a {
	color: #06c755;
	text-decoration: none;
  }

  .form-box-forgot {
	width: 100%;
	max-width: 570px;
	padding: 40px;
	border-radius: 10px;
	text-align: center;
  }

  .form-box-forgot h2 {
	margin-bottom: 40px;
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 30px;
  }

  .form-box-forgot p {
	font-size: 14px;
  }

  .form-box-forgot button {
	width: 80%;
	padding: 12px;
	background: linear-gradient(90deg, #28a745, #06c755);
	border: none;
	color: #fff;
	font-size: 16px;
	border-radius: 25px;
	cursor: pointer;
	transition: 0.3s;
	margin-top: 40px;
  }

  .form-box-forgot button:hover {
	background: linear-gradient(90deg, #06c755, #28a745);
  }

  .otp-inputs {
	display: flex;
	gap: 12px;
  }

  .otp-inputs input {
	width: 48px;
	height: 48px;
	text-align: center;
	font-size: 20px;
	border-radius: 8px;
	border: 1px solid #ddd;
	outline: none;
	transition: border 0.2s ease, box-shadow 0.2s ease;
  }

  .otp-inputs input:focus {
	border: 1px solid #0f0;
	box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
  }

  .form-box p.message {
	text-align: left;
	margin-bottom: 20px;
  }

  .footer {
	background: #06c755;
	color: #fff;
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
	position: relative;
  }

  .footer-top {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
  }

  .footer-info {
	max-width: 400px;
  }

  .footer-info > p {
	position: relative;
  }

  .footer-info > p > img {
	position: absolute;
	left: 0;
	top: -2px;
  }

  .footer-logo {
	width: 80px;
	margin-bottom: 15px;
  }

  .footer-col h4 {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
  }

  .footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
  }

  .footer-col ul li {
	margin-bottom: 6px;
  }

  .footer-col ul li a {
	color: #fff;
	text-decoration: none;
  }

  .footer-col ul li a:hover {
	text-decoration: underline;
  }

  .footer hr {
	border: 0;
	border-top: 1px solid #FFF;
	margin: 20px 0;
  }

  .footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	font-size: 14px;
  }

  .footer-social a {
	margin-left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }

  .footer-social a svg,
  .footer-social a i {
	width: 20px;
	height: 20px;
  }

  .footer-social img {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
  }

  .scan-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 20px;
	position: absolute;
	top: -100px;
	right: 20px;

  }

  .qr {
	width: 120px;
	height: 120px;
  }

  .label {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
  }

  .circle-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid #0f0;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
  }

  .circle-btn img {
	width: 28px;
	height: 28px;
  }

  [x-cloak] {
	display: none !important;
  }

  /* Landing Page Animations */
  @keyframes blob {
	0% {
	  transform: translate(0px, 0px) scale(1);
	}
	33% {
	  transform: translate(30px, -50px) scale(1.1);
	}
	66% {
	  transform: translate(-20px, 20px) scale(0.9);
	}
	100% {
	  transform: translate(0px, 0px) scale(1);
	}
  }

  @keyframes float {
	0%, 100% {
	  transform: translateY(0px);
	}
	50% {
	  transform: translateY(-20px);
	}
  }

  @keyframes pulse-subtle {
	0%, 100% {
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
  }

  .animate-blob {
	animation: blob 7s infinite;
  }

  .animation-delay-2000 {
	animation-delay: 2s;
  }

  .animation-delay-4000 {
	animation-delay: 4s;
  }

  .animate-float {
	animation: float 3s ease-in-out infinite;
  }

  .animate-pulse-subtle {
	animation: pulse-subtle 2s ease-in-out infinite;
  }

  /* Landing Page Styles */
  .landing-page {
	overflow-x: hidden;
  }

  .hero-section-landing {
	position: relative;
  }

  .feature-card {
	border: 1px solid transparent;
	transition: all 0.3s ease;
  }

  .feature-card:hover {
	border-color: rgba(5, 150, 105, 0.2);
  }

  .pricing-card {
	border: 1px solid #e5e7eb;
	transition: all 0.3s ease;
  }

  .pricing-card:hover {
	border-color: #10b981;
  }

  .btn-primary-landing {
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .btn-primary-landing:hover {
	box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.4), 0 10px 10px -5px rgba(5, 150, 105, 0.2);
  }

  .btn-secondary-landing {
	transition: all 0.3s ease;
  }

  /* Smooth scroll */
  html {
	scroll-behavior: smooth;
  }

  /* Reviews Section */
  .review-card {
	transition: all 0.3s ease;
  }

  .review-card:hover {
	border-color: #10b981 !important;
  }

  .reviews-section {
	background: linear-gradient(to bottom, #ffffff, #f9fafb);
  }

  /* Contact Section */
  .contact-section {
	position: relative;
  }

  /* Contact Form 7 Styling - Reset CF7 default spacing */
  .wpcf7-form p {
	margin: 0 !important;
	padding: 0 !important;
  }

  .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0 !important;
  }

  .wpcf7-form br {
	display: none;
  }

  .wpcf7-form label {
	margin-bottom: 0.25rem;
	display: block;
  }

  .wpcf7-form input:not([type="submit"]),
  .wpcf7-form textarea {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
  }

  .wpcf7-form input:focus,
  .wpcf7-form textarea:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  }

  .wpcf7-form input::placeholder,
  .wpcf7-form textarea::placeholder {
	color: #9ca3af;
  }

  .wpcf7-form .wpcf7-submit {
	cursor: pointer;
	margin-top: 1rem !important;
	padding: 0.875rem 1.5rem !important;
	width: 100%;
	background: linear-gradient(to right, #059669, #16a34a) !important;
	color: white !important;
	border: none !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
  }

  .wpcf7-form .wpcf7-submit::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
  }

  .wpcf7-form .wpcf7-submit:hover {
	box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4) !important;
	transform: translateY(-2px);
	background: linear-gradient(to right, #047857, #15803d) !important;
  }

  .wpcf7-form .wpcf7-submit:hover::before {
	left: 100%;
  }

  .wpcf7-form .wpcf7-submit:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2) !important;
  }

  .wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
  }

  .wpcf7-form .wpcf7-submit:disabled::before {
	display: none;
  }

  .wpcf7-form .wpcf7-not-valid-tip {
	color: #ef4444;
	font-size: 0.75rem;
	margin-top: 0.125rem;
	display: block;
  }

  .wpcf7-form .wpcf7-response-output {
	border-radius: 0.5rem;
	padding: 0.75rem;
	margin: 0.75rem 0 0 0 !important;
	font-size: 0.875rem;
  }

  .wpcf7-form .wpcf7-mail-sent-ok {
	background-color: #d1fae5;
	border: 1px solid #10b981;
	color: #065f46;
  }

  .wpcf7-form .wpcf7-validation-errors {
	background-color: #fee2e2;
	border: 1px solid #ef4444;
	color: #991b1b;
  }

  .wpcf7-form .wpcf7-spinner {
	margin-left: 0.5rem;
  }