/* Custom styles for Lucia's Guide */

:root {
  /* Colors */
  --color-primary: #13afd9;
  --color-primary-light: #4cc3e3;
  --color-primary-dark: #0d8aa9;
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-700: #495057;
  --color-dark: #212529;
  --color-text: #333333;

  /* Fonts - Vietnamese Optimized */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 2.5rem;  /* 40px */
  --spacing-3xl: 3rem;    /* 48px */
}

/* Base text styles */
body {
  color: var(--color-text);
  line-height: 1.6;
  font-family: var(--font-primary);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 500;
}

h3, h4 {
  font-weight: 500;
}

h5, h6 {
  font-weight: 400;
}

p {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-secondary);
  line-height: 1.7;
}

/* Override primary color */
.text-primary {
  color: var(--color-primary) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}

/* Buttons */
.btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: all 0.3s ease;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 8px;
  font-weight: 500;
}

.btn:hover {
  background-color: var(--color-primary-dark);
}

/* Links */
a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary);
}

/* Selection */
::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Header */
.sticky-header.is-fixed .main-bar {
  background: var(--color-white);
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

/* Header-2 specific styles */
.header-2 {
  background: var(--color-white);
}

.header-2 .border-b {
  border-color: var(--color-gray-200) !important;
}

/* Top bar info */
.header-2 .text-gary {
  color: var(--color-text) !important;
}

/* Fix header contact info alignment */
.header-2 .flex.items-center.gap-10 {
  justify-content: center;
  align-items: center;
}

.header-2 .flex.items-center.gap-10 p {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Specific fix for contact sections */
.header-2 .border-r.border-\[#d8d8d8\] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center all contact info elements */
.header-2 .xxl\\:text-base.text-sm.leading-30.text-gary.font-normal {
  text-align: center;
  display: block;
  width: 100%;
}

/* Footer copyright center alignment */
.copyright {
  justify-content: center !important;
  text-align: center;
}

.copyright p {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

/* Footer text colors - lighter */
footer {
  color: #b8c5d1 !important;
}

footer p {
  color: #b8c5d1 !important;
}

footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #e2e8f0 !important;
}

footer a {
  color: #cbd5e0 !important;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--color-primary) !important;
}

/* Specific footer text classes */
.text-lightgary {
  color: #b8c5d1 !important;
}

/* Footer links */
footer ul li a {
  color: #cbd5e0 !important;
}

footer ul li a:hover {
  color: var(--color-primary) !important;
}

/* Footer contact info spacing */
footer .pb-6 {
  padding-bottom: 0.5rem !important; /* Giảm từ 1.5rem xuống 0.5rem */
}

footer .pb-16 {
  padding-bottom: 1rem !important; /* Giảm từ 4rem xuống 1rem */
}

/* Specific contact section spacing */
footer h6.pb-6 {
  margin-bottom: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

footer li.pb-16 span,
footer li.pb-16 a {
  margin-top: 0.25rem;
  display: block;
}

/* Footer general spacing - reduce all pb-16 and pb-20 classes */
footer .pb-20 {
  padding-bottom: 0.75rem !important; /* Giảm từ 5rem xuống 0.75rem */
}

footer .mb-20 {
  margin-bottom: 0.75rem !important; /* Giảm từ 5rem xuống 0.75rem */
}

footer .pt-14 {
  padding-top: 0.75rem !important; /* Giảm từ 3.5rem xuống 0.75rem */
}

footer .pb-30 {
  padding-bottom: 1rem !important; /* Giảm từ 7.5rem xuống 1rem */
}

/* Footer links spacing */
footer .footer-link ul li {
  padding-bottom: 0.75rem !important; /* Giảm khoảng cách giữa các link */
}

footer .footer-link ul li.pb-16 {
  padding-bottom: 0.75rem !important;
}

/* Footer description text */
footer .footre-logo p {
  padding-top: 0.75rem !important;
  padding-bottom: 1rem !important;
}

/* Specific targeting for Link and Services sections */
footer .footer-link h5 {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.25rem !important;
}

footer .footer-link ul li a {
  display: block;
  padding: 0.25rem 0 !important;
  margin: 0 !important;
}

footer .footer-link ul li.pb-16.group {
  padding-bottom: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Override all pb-16 in footer links specifically */
footer .footer-link .pb-16 {
  padding-bottom: 0.5rem !important;
}

/* Tighten up the chevron icon spacing */
footer .footer-link ul li a i {
  margin-right: 0.5rem !important;
}

/* Mobile-specific footer spacing */
@media (max-width: 768px) {
  /* Footer sections titles - more space after title */
  footer .footer-link h5 {
    margin-bottom: 0.75rem !important;  /* Tăng từ 0.25rem lên 0.75rem */
    padding-bottom: 0.25rem !important; /* Tăng từ 0.125rem lên 0.25rem */
  }
  
  /* Footer links - tighter between items */
  footer .footer-link ul li {
    padding-bottom: 0.125rem !important; /* Giảm từ 0.25rem xuống 0.125rem */
  }
  
  footer .footer-link ul li.pb-16 {
    padding-bottom: 0.125rem !important; /* Giảm từ 0.25rem xuống 0.125rem */
  }
  
  footer .footer-link ul li.pb-16.group {
    padding-bottom: 0.125rem !important; /* Giảm từ 0.25rem xuống 0.125rem */
    margin-bottom: 0 !important;
  }
  
  footer .footer-link .pb-16 {
    padding-bottom: 0.125rem !important; /* Giảm từ 0.25rem xuống 0.125rem */
  }
  
  /* Links themselves - very tight */
  footer .footer-link ul li a {
    padding: 0.05rem 0 !important; /* Giảm từ 0.125rem xuống 0.0625rem */
    margin: 0 !important;
    line-height: 1.2; /* Giảm từ 1.3 xuống 1.2 */
  }
  
  /* Contact section on mobile */
  footer .pb-6 {
    padding-bottom: 0.25rem !important;
  }
  
  footer .pb-16 {
    padding-bottom: 0.5rem !important;
  }
  
  /* General footer spacing on mobile */
  footer .mb-20 {
    margin-bottom: 0.5rem !important;
  }
  
  footer .pb-20 {
    padding-bottom: 0.5rem !important;
  }
  
  footer .pt-14 {
    padding-top: 0.5rem !important;
  }
  
  footer .pb-30 {
    padding-bottom: 0.75rem !important;
  }
  
  /* Hide footer button on mobile */
  footer .footre-logo a:last-child {
    display: none !important;
  }
  
  footer .footre-logo a img[src*="button-footer"] {
    display: none !important;
  }
  
  /* Header mobile optimization - much more compact */
  .header-2 {
    padding-bottom: 0 !important; /* Bỏ hoàn toàn pb-10 */
  }
  
  .header-2 .border-b {
    display: none !important; /* Ẩn top bar trên mobile */
  }
  
  .header-2 .main-bar {
    padding: 0.25rem 0 !important; /* Giảm từ 0.5rem xuống 0.25rem */
  }
  
  .header-2 .bottom-bar {
    padding: 0.125rem 0 !important; /* Giảm từ 0.25rem xuống 0.125rem */
  }
  
  .header-2 .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Logo size on mobile - smaller */
  .header-2 .logo img {
    max-height: 32px !important; /* Giảm từ 40px xuống 32px */
    width: auto !important;
  }
  
  .header-2 .logo {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Mobile menu button - more compact */
  #mobile-menu {
    padding: 0.25rem !important; /* Giảm từ 0.5rem xuống 0.25rem */
    font-size: 1.25rem !important;
  }
  
  /* Two-bar container - remove extra spacing */
  .header-2 .two-bar {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .header-2 .flex.items-center.justify-between {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Services section mobile optimization */
  .services-two {
    padding: 0.375rem !important; /* Giảm thêm từ 0.5rem */
  }
  
  /* Service icons mobile */
  .services-two i {
    width: 40px !important; /* Giảm từ 45px */
    height: 40px !important;
  }
  
  .services-two i svg {
    width: 20px !important; /* Giảm từ 22px */
    height: 20px !important;
  }
  
  /* Service titles mobile */
  .services-two h3 a {
    font-size: 0.9rem !important; /* Giảm từ 1.125rem */
    padding-top: 0.25rem !important; /* Giảm từ 0.5rem */
  }
  
  /* Service descriptions mobile */
  .services-two p {
    font-size: 0.8rem !important; /* Giảm từ 0.875rem */
    line-height: 1.3 !important; /* Giảm từ 1.4 */
    margin-top: 0.25rem !important; /* Giảm từ 0.5rem */
  }
  
  /* Service numbers mobile */
  .services-two span {
    font-size: 2.5rem !important; /* Giảm từ 3rem */
    opacity: 0.3 !important; /* Giảm từ 0.4 */
    bottom: 0.125rem !important; /* Giảm từ 0.25rem */
    right: 0.125rem !important; /* Giảm từ 0.25rem */
  }
  
  /* Mobile service cards - float and overflow hidden approach */
  .services-two {
    position: relative;
  }
  
  /* Icon floats left */
  .services-two > i {
    float: left !important;
    margin-right: 0.5rem !important; /* Giảm từ 0.75rem */
    margin-bottom: 0 !important;
  }
  
  /* Title uses overflow hidden to create inline effect */
  .services-two > h3 {
    overflow: hidden !important;
    padding-top: 0.5rem !important; /* Giảm từ 0.75rem */
    margin: 0 !important;
  }
  
  .services-two h3 a {
    font-size: 1.125rem !important; /* Tăng từ 1rem lên 1.125rem (18px) */
    padding: 0 !important;
    line-height: 1.3 !important; /* Tăng từ 1.2 */
    display: block !important;
    font-weight: 600 !important; /* Thêm font-weight để nổi bật hơn */
  }
  
  /* Description layout - full width since number moved to top */
  .services-two > p {
    clear: both !important;
    margin-top: 0.5rem !important; /* Giảm từ 1rem */
    padding-top: 0 !important;
    padding-right: 0 !important; /* Bỏ padding-right vì số đã lên trên */
    position: relative !important;
  }
  
  /* Service descriptions mobile */
  .services-two p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }
  
  /* Service numbers mobile - position at top right */
  .services-two span {
    position: absolute !important;
    right: 0.375rem !important; /* Điều chỉnh cho padding mới */
    top: 0.375rem !important; /* Điều chỉnh cho padding mới */
    font-size: 2rem !important; /* Giảm thêm size cho gọn */
    opacity: 0.25 !important; /* Giảm opacity để không cản trở */
    line-height: 1 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }
  
  /* Services section spacing mobile */
  section.lg\:py-120.md\:py-80.py-60 {
    padding-top: 1.5rem !important; /* Giảm từ 2rem */
    padding-bottom: 1.5rem !important; /* Giảm từ 2rem */
  }
  
  /* Grid gap mobile */
  .grid.gap-25 {
    gap: 0.75rem !important; /* Giảm từ 1rem */
  }
}

/* Fix blog section buttons - .btn.two */
.btn.two {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
}

.btn.two:before {
  background-color: var(--color-primary-dark) !important;
}

.btn.two:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

.btn.two span {
  color: var(--color-white) !important;
}

.btn.two span i {
  color: var(--color-white) !important;
  margin-left: 8px;
}

/* Before/After Image Slider Styles */
.before-after-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
}

.image-container {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  display: block;
}

.before-after-image {
  width: 100%;
  height: 250px;         /* Độ cao cố định, thay đổi theo nhu cầu */
  object-fit: cover;     /* Các ảnh sẽ luôn cùng tỉ lệ, không méo */
  border-radius: 20px;   /* Bo góc, thay số tùy ý */
  border: 2px solid #ececec; /* hoặc màu viền tuỳ ý */
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.slider:focus-visible ~ .slider-button {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: 0.2rem;
  height: 100%;
  background-color: #fff;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}

.slider-button {
  position: absolute;
  background-color: #fff;
  color: var(--color-primary);
  padding: 0.4rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.before-after-container:hover .slider-button {
  background-color: var(--color-primary);
  color: white;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Mobile: 2 columns */
@media (max-width: 1023px) {
  .before-after-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .image-container {
    aspect-ratio: 4/5; /* Taller on mobile for better viewing */
  }
  
  .slider-button {
    padding: 0.3rem;
  }
  
  .slider-button svg {
    width: 16px;
    height: 16px;
  }
}

/* Hero section - Hide stats on mobile */
@media (max-width: 768px) {
  .benner-2 .experience-team + div {
    display: none !important;
  }
  
  /* Choose Us section - smaller image on mobile */
  .relative .absolute.top-\[-9\%\] {
    width: 120px !important; /* Giảm từ size-150 */
    height: 120px !important;
    top: -5% !important; /* Điều chỉnh position */
    left: -3% !important;
  }
  
  .relative .absolute img:first-child {
    width: 50px !important; /* Giảm từ size-60 */
    height: 50px !important;
    padding: 12px !important; /* Giảm từ p-17 */
  }
  
  .relative .absolute img.circle {
    padding: 12px !important; /* Giảm từ p-17 */
  }
  
  /* Main image smaller border radius on mobile */
  .relative > img {
    border-top-right-radius: 60px !important; /* Giảm từ rounded-tr-[100px] */
    border-bottom-left-radius: 60px !important; /* Giảm từ rounded-bl-[100px] */
  }
  
  /* About text section - compact on mobile */
  .about-text-two {
    gap: 1rem !important; /* Tăng gap để có khoảng cách giữa 2 items */
    margin-top: 1rem !important;
    justify-content: center !important; /* Căn giữa horizontal */
    flex-wrap: nowrap !important; /* Không wrap, giữ trên 1 dòng */
  }
  
  .about-text-two .flex {
    padding: 0.5rem !important;
    width: auto !important; /* Thay đổi từ w-full */
    flex: 0 0 auto !important; /* Không grow/shrink */
    justify-content: center !important;
    align-items: center !important; /* Căn giữa vertical */
  }
  
  .about-text-two i {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(19, 175, 217, 0.1) !important;
    border-radius: 8px !important;
  }
  
  .about-text-two svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .about-text-two h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding-left: 0.75rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  
  /* Giảm size chữ "Khách hàng hài lòng" */
  .about-text-two + div span.text-2xl {
    font-size: 1.25rem !important; /* Giảm từ text-2xl (1.5rem) */
  }
  
  /* Portfolio/Dịch vụ HOT section - Change aspect ratio to 5:3 on mobile */
  .portfolio-section .grid img {
    aspect-ratio: 5/2 !important; /* Thay đổi từ 1:1 thành 5:3 */
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Review/Testimonial section - smaller text on mobile */
  .swiper-review-two h2 {
    font-size: 1.75rem !important; /* Giảm từ text-2.5xl */
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .swiper-review-two .swiper-slide h6 {
    font-size: 1rem !important; /* Giảm từ text-xl */
    line-height: 1.5 !important;
    padding-right: 1rem !important; /* Giảm từ pr-20 */
    margin-bottom: 1.5rem !important;
  }
  
  .swiper-review-two .swiper-slide h4 {
    font-size: 1.125rem !important; /* Giảm từ text-xxl */
    padding-bottom: 0.25rem !important;
  }
  
  .swiper-review-two .swiper-slide span {
    font-size: 0.875rem !important; /* Giảm font size */
  }
  
  /* Review section title - more specific targeting */
  section h2 {
    font-size: 1.5rem !important; /* Giảm thêm từ 1.75rem */
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Review section images - keep original size */
  .swiper-review-two-img img {
    width: 80px !important; /* Giữ nguyên w-80 */
    height: 80px !important;
  }
  
  /* Review section spacing */
  .swiper-review-two .swiper-slide .flex {
    padding-bottom: 1rem !important; /* Giảm từ pb-24 */
    margin-bottom: 0.75rem !important; /* Giảm thêm từ 1.5rem */
  }
  
  /* Quote icon smaller */
  .swiper-review-two .swiper-slide img[src*="quote"] {
    width: 30px !important; /* Giảm từ w-50 */
    height: auto !important;
  }
  
  /* Mobile: Make quote and customer info on same line */
  .swiper-review-two .swiper-slide {
    position: relative;
  }
  
  .swiper-review-two .swiper-slide h4,
  .swiper-review-two .swiper-slide span {
    display: inline-block !important;
    margin-right: 1rem !important;
  }
  
  .swiper-review-two .swiper-slide h4 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Position quote icon to the right of customer info */
  .swiper-review-two .swiper-slide .flex {
    position: relative;
    border-bottom: none !important; /* Remove border */
    padding-right: 40px !important; /* Add space for quote icon */
  }
  
  .swiper-review-two .swiper-slide img[src*="quote"] {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important; /* Center vertically in testimonial */
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  
  /* Add padding bottom to slide for customer info */
  .swiper-review-two .swiper-slide {
    padding-bottom: 2.5rem !important; /* Space for customer info */
  }
  
  /* Center swiper pagination - simple approach */
  .swiper-pagination {
    text-align: center !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .swiper-pagination-bullet {
    margin: 0 4px !important;
  }
  
  /* Blog section - mobile optimization - balanced approach */
  .blog-two-style {
    padding: 1rem !important; /* Tăng lại từ 0.75rem để có không gian hợp lý */
  }
  
  .blog-two-style figure {
    margin-bottom: 0.75rem !important; /* Tăng lại từ 0.5rem */
  }
  
  .blog-two-style h4 {
    font-size: 1.125rem !important; /* Tăng từ 1rem lên 1.125rem */
    line-height: 1.4 !important;
    padding-bottom: 0.75rem !important; /* Tăng từ 0.5rem */
    margin-bottom: 0 !important; /* Bỏ margin-bottom */
  }
  
  .blog-two-style .mental-health {
    gap: 0.75rem !important; /* Tăng từ 0.5rem */
    padding-top: 0.5rem !important; /* Tăng từ 0.25rem */
    padding-bottom: 0.5rem !important; /* Tăng từ 0.25rem */
    margin-bottom: 0.75rem !important; /* Tăng từ 0.5rem */
    font-size: 0.875rem !important; /* Tăng từ 0.8rem */
  }
  
  .blog-two-style .mental-health li {
    padding-left: 0.75rem !important; /* Tăng từ 0.5rem */
  }
  
  .blog-two-style .btn {
    padding: 0.75rem 1.25rem !important; /* Tăng button padding */
    font-size: 0.9rem !important; /* Tăng từ 0.875rem */
  }
  
  /* Blog section title container */
  .text-center.m-auto {
    padding-bottom: 1.5rem !important; /* Tăng từ 1rem */
  }
  
  /* Blog section title */
  section h2:contains("Kiến thức thẩm mỹ") {
    font-size: 1.75rem !important; /* Tăng từ 1.5rem */
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important; /* Tăng từ 0.5rem */
  }
  
  /* Blog section spacing */
  section.lg\:pb-120 {
    padding-top: 1rem !important; /* Giảm từ 2.5rem để gần phần trên hơn */
    padding-bottom: 2rem !important;
  }
  
  /* Blog meta info - mobile layout */
  .blog-two-style .mental-health {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .blog-two-style .mental-health li:first-child {
    order: 1 !important;
  }
  
  .blog-two-style .mental-health li:last-child {
    order: 2 !important;
    padding-left: 0 !important;
    margin-left: auto !important;
  }
  
  /* Hide the slash separator */
  .blog-two-style .mental-health li:last-child::before {
    display: none !important;
  }
  
  /* Reduce vertical spacing between lines */
  .blog-two-style h4 {
    padding-bottom: 0.5rem !important; /* Giảm từ 0.75rem */
    line-height: 1.3 !important; /* Tighter line height */
  }
  
  .blog-two-style .mental-health {
    margin-bottom: 0.5rem !important; /* Giảm từ 0.75rem */
    padding-top: 0.25rem !important; /* Giảm từ 0.5rem */
    padding-bottom: 0.25rem !important; /* Giảm từ 0.5rem */
  }
  
  .blog-two-style figure {
    margin-bottom: 0.5rem !important; /* Giảm từ 0.75rem */
  }
  
}

/* Services section - 5 items on desktop using CSS Grid */
@media (min-width: 1280px) {
  /* Override the grid-cols-12 to create 5 equal columns */
  section .grid.grid-cols-12.gap-25 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  
  /* Make all service items span 1 column instead of 3 */
  .xl\:col-span-3 {
    grid-column: span 1 !important;
  }
  
  /* Smaller numbers for 5-column layout */
  .services-two span {
    font-size: 4.5rem !important; /* Giảm thêm từ 6rem xuống 4.5rem */
    bottom: -2rem !important; /* Điều chỉnh position gần hơn */
    right: 0.5rem !important; /* Dịch vào trong 1 chút */
    opacity: 0.3 !important; /* Tăng lại opacity để rõ hơn */
  }
  
  /* Portfolio/Dịch vụ HOT title smaller on desktop */
  .portfolio-section h2 {
    font-size: 4rem !important; /* Giảm từ kích thước mặc định */
  }
  
  /* Before/After results - 4 images in 1 row on desktop */
  .before-after-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 90% !important; /* Tăng từ 80% để có không gian cho 4 cột */
    margin: 0 auto !important; /* Căn giữa grid */
  }
  
  /* Before/After images - 4:5 aspect ratio on desktop (same as mobile) */
  .before-after-grid .image-container {
    aspect-ratio: 4/5 !important;
  }
}

/* Before/After slider button improvements */
.slider-button {
  width: 48px !important; /* Tăng 20% từ 40px */
  height: 48px !important; /* Tăng 20% từ 40px */
  top: 75% !important; /* 1/4 từ dưới lên (3/4 từ trên xuống) */
  left: calc(var(--position) - 24px) !important; /* Căn giữa button với thanh phân chia */
  transform: translateY(-50%) !important; /* Căn giữa theo chiều dọc tại vị trí mới */
  opacity: 0.7 !important; /* 40% opacity */
}

.slider-button::before,
.slider-button::after {
  width: 16px !important; /* Tăng 20% từ ~13px */
  height: 3px !important; /* Tăng từ 2px */
}

/* Slider line positioning */
.slider-line {
  left: var(--position) !important; /* Thanh phân chia theo vị trí slider */
  transform: translateX(-40%) !important;
    /* Căn giữa thanh phân chia */
}

/* Services section - Fix SVG icons */
.services-two svg path {
  stroke: var(--color-primary) !important;
  stroke-width: 2 !important;
  fill: none !important;
}

.services-two:hover svg path {
  stroke: var(--color-white) !important;
}

/* Desktop: 6 columns */
@media (min-width: 1024px) {
  .before-after-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
  }
}

/* Navigation */
.navbar-links a {
  color: var(--color-text);
  font-weight: 400;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  letter-spacing: 0;
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: var(--color-primary) !important;
}

/* Social icons */
.header-2 .text-gary:hover {
  color: var(--color-primary) !important;
}

/* Override common color classes */
.text-gary {
  color: var(--color-text) !important;
}

.hover\:text-primary:hover {
  color: var(--color-primary) !important;
}

/* Button styles */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 25px;
  padding: 12px 24px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: fit-content;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Additional button classes */
.button, .btn-outline, .btn-secondary {
  border-radius: 25px;
  padding: 12px 24px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  width: auto;
  max-width: fit-content;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Form elements */
.form-control {
  border: 1px solid var(--color-gray-200);
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(19, 175, 217, 0.25);
}

/* Override original font classes */
.font-sora {
  font-family: var(--font-primary) !important;
}

.font-urbanist {
  font-family: var(--font-secondary) !important;
}

/* Tech/Forum specific styles - Feminine touch */
.forum-title {
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: 0;
}

.forum-content {
  font-family: var(--font-secondary);
  line-height: 1.8;
  font-weight: 300;
}

.tech-label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Feminine design elements */
.soft-card {
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.soft-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.gentle-text {
  font-family: var(--font-secondary);
  font-weight: 300;
  line-height: 1.8;
  color: #555;
}

.elegant-heading {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Hero Section Improvements */
.hero-section {
  position: relative;
}

.hero-section h1 {
  color: var(--color-white) !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  margin-bottom: var(--spacing-lg);
}

.hero-section p {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-bottom: var(--spacing-xl);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Button with rounded shape */
.btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: all 0.3s ease;
  border-radius: 30px;
  padding: 14px 28px;
  font-weight: 400;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  letter-spacing: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: fit-content;
  box-shadow: 0 4px 15px rgba(19, 175, 217, 0.2);
}

.btn:hover {
  background-color: var(--color-primary-dark);
}

/* Specific overrides for common classes */
.text-white {
  color: var(--color-white) !important;
}

.text-6xl, .text-5xl, .text-4xl {
  color: var(--color-white) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Banner/Hero specific styles */
.banner-section h1,
.hero-banner h1,
.banner h1 {
  color: var(--color-white) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.banner-section p,
.hero-banner p,
.banner p {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Cards and Sections */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.card:hover {
  transform: translateY(-5px);
}

.section-padding {
  padding: var(--spacing-2xl) 0;
}

/* Service boxes */
.services-box {
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  background: var(--color-white);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.services-box h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

.services-box p {
  margin-bottom: var(--spacing-md);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  :root {
    /* Adjust spacing for mobile */
    --spacing-2xl: 2rem;
    --spacing-xl: 1.5rem;
    --spacing-lg: 1.25rem;
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    width: 100%; /* Full width buttons on mobile */
  }
  
  .card {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .services-box {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
  }

  /* Improve text readability on mobile */
  p {
    font-size: 1rem;
    line-height: 1.7;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }

  /* Add more breathing room between sections */
  .section-padding {
    padding: var(--spacing-xl) 0;
  }

  /* Improve touch targets */
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Header-2 mobile optimizations */
  .header-2 .border-b {
    display: none; /* Hide top bar on mobile */
  }

  .header-2 .container {
    padding: 0 var(--spacing-md);
  }

  /* Mobile navigation */
  .navbar-links {
    padding: var(--spacing-md);
  }

  .navbar-links li {
    margin-bottom: var(--spacing-sm);
  }

  .navbar-links a {
    padding: var(--spacing-sm) 0;
    font-size: 1rem;
  }

  /* Mobile menu toggle */
  #mobile-menu {
    padding: var(--spacing-sm);
    color: var(--color-text);
  }

  #mobile-menu:hover {
    color: var(--color-primary);
  }

  /* Hero section mobile */
  .hero-section {
    padding: var(--spacing-2xl) 0;
  }

  .hero-section h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
    color: var(--color-white) !important;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  .hero-section p {
    font-size: 1rem;
    margin-bottom: var(--spacing-xl);
    color: var(--color-white) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  /* Button mobile - rounded shape */
  .btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: fit-content;
  }
  
  .btn:hover {
    background-color: var(--color-primary-dark);
  }
}

/* Loading states */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.2),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Floating Contact Buttons */
.floating-contact-buttons {
  position: fixed;
  right: 20px;
  bottom: 120px; /* Phía trên back to top button */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}

.floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.floating-btn svg {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

.floating-btn:hover svg {
  transform: scale(1.1);
}

/* Messenger Button */
.messenger-btn {
  background: linear-gradient(135deg, #00B2FF, #006AFF);
  color: white;
}

.messenger-btn:hover {
  background: linear-gradient(135deg, #0099E6, #0056CC);
  color: white;
}

/* Zalo Button */
.zalo-btn {
  background: linear-gradient(135deg, #0068FF, #0052CC);
  color: white;
}

.zalo-btn:hover {
  background: linear-gradient(135deg, #0056E6, #0044B3);
  color: white;
}

/* Hero section - Mobile: Hide image and stats */
@media (max-width: 1023px) {
  /* Ẩn cột ảnh trên mobile */
  .benner-2 .lg\:col-span-6:last-child {
    display: none !important;
  }
  
  /* Text chiếm full width */
  .benner-2 .lg\:col-span-6:first-child {
    grid-column: span 12 !important;
  }
  
  /* Ẩn phần đếm số (stats) trên mobile */
  .benner-2 .absolute.bg-white {
    display: none !important;
  }
  
  /* Hero section spacing adjustments */
  .benner-2 {
    padding-bottom: 1.5rem !important; /* Giảm padding dưới từ 3rem */
  }
  
  .benner-2 .relative {
    padding-top: 1rem !important; /* Giảm padding trên từ pt-30 */
  }
  
  .benner-2 h1 {
    margin-bottom: 0.75rem !important; /* Giảm thêm margin giữa title và paragraph */
  }
  
  .benner-2 p {
    margin-top: 0.5rem !important; /* Giảm thêm margin trên của paragraph */
    padding-bottom: 0.75rem !important; /* Giảm thêm padding dưới paragraph */
  }
}

/* Service Cards - Expandable description on mobile */
@media (max-width: 768px) {
  .services-two p {
    max-height: 0 !important; /* Ẩn mô tả mặc định */
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transition: all 0.4s ease !important; /* Smooth animation */
  }
  
  .services-two p.expanded {
    max-height: 200px !important; /* Đủ cao cho nội dung */
    opacity: 1 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }
  
  /* Service card clickable */
  .services-two {
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .services-two:hover {
    transform: translateY(-2px);
  }
  
  /* Hide hotline on mobile */
  .about-service .flex.items-center.gap-23 {
    display: none !important;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .floating-contact-buttons {
    right: 16px;
    bottom: 100px; /* Điều chỉnh cho mobile */
    gap: 10px;
  }
  
  .floating-btn {
    width: 50px;
    height: 50px;
  }
  
  .floating-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* Form consistency fixes */
.form-input,
.form-select,
.form-textarea {
  box-sizing: border-box;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-text);
  background-color: #fff;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(19, 175, 217, 0.1);
}

/* Disable nice-select plugin completely */
.nice-select {
  display: none !important;
}

/* Ensure native select styling */
.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px !important;
  min-height: 55px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Ensure select text is visible and has proper spacing */
.form-select option {
  padding: 10px 8px !important;
  min-height: 40px !important;
  line-height: 1.5 !important;
}

/* Recaptcha responsive fix */
.recaptcha-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
}

@media (max-width: 640px) {
  .form-input,
  .form-textarea {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  .form-select {
    min-height: 50px !important;
    height: auto !important;
    padding: 1rem !important;
    padding-right: 3rem !important; /* Extra space for dropdown arrow on mobile */
    display: block !important;
    align-items: center !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  
  .form-textarea {
    height: 80px !important;
    min-height: 80px !important;
  }
  
  .btn {
    width: 100% !important;
    /* padding: 1rem 2rem !important; */
    font-size: 1.1rem !important;
    font-weight: 550 !important;
  }
}