/* Homepage specific styles */
:root {
  --hero-height-desktop: 560px; /* fallback min height */
  --hero-height-mobile: 400px;
  --home-header-total: 0px; /* will be updated dynamically if needed */
}

.hero-slider {
  width: 100%;
  /* Fill entire first viewport (header floats above) */
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  border-radius: 0 0 28px 28px;
  margin: 0;
  background: #111; /* fallback while images load */
  position: relative;
  display: flex;
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .hero-slider { border-radius: 0 0 18px 18px; }
}
.hero-slides { position: relative; width:100%; height:100%; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.hero-slide.active { opacity:1; z-index:2; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }

/* Soft gradient overlay (top-left fade) */
.hero-slider::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 25% 35%, rgba(var(--primary-color-rgb),0.38), rgba(var(--primary-color-rgb),0) 62%),
              linear-gradient(180deg, rgba(var(--primary-color-rgb),0.32) 0%, rgba(var(--primary-color-rgb),0) 55%);
  mix-blend-mode:normal;
  z-index:3;
}

/* Page-home header overlay adjustments */
/* Absolute overlay for home header pieces */
/* Only use absolute overlay on homepage if we are NOT in global fixed mode */
.page-home:not(.global-fixed-header) .header-wrapper,
.page-home:not(.global-fixed-header) .top-banner { position: absolute; left:0; right:0; }
.page-home:not(.global-fixed-header) .top-banner { top:0; }
.page-home:not(.global-fixed-header) .header-wrapper { top: var(--top-banner-height, 0px); }
/* Stacking */
.page-home .top-banner { z-index: 1200; }
.page-home .header-wrapper { z-index: 1199; }

/* Add padding to avoid glass header content touching top when banner hidden */
.page-home .header-wrapper .main-header { margin-top: 0; }

/* Add spacing after hero so content not hidden when header absolute + user scroll jump */
.page-home main { margin-top: 80px; }

/* Dots */
.hero-dots { position:absolute; left:2.2rem; bottom:1.8rem; z-index:6; }
.hero-dot { width:42px; height:8px; border-radius:8px; background:rgba(255,255,255,0.35); border:none; padding:0; cursor:pointer; transition:all .35s ease; }
.hero-dot.active { background:var(--primary-color); width:64px; }
.hero-dot:hover:not(.active) { background:rgba(255,255,255,0.6); }
@media (max-width: 767.98px){
  .hero-dots { left:1rem; bottom:1rem; }
  .hero-dot { width:28px; height:6px; }
  .hero-dot.active { width:44px; }
}

/* Arrows */
.hero-nav { position:absolute; z-index:6; bottom:1.5rem; right:1.5rem; background:#fff; width:54px; height:54px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 30px -8px rgba(0,0,0,0.25); transition:all .35s ease; font-size:1.35rem; }
.hero-nav.hero-prev { right:6.1rem; }
.hero-nav:hover { background:var(--primary-color); color:#fff; transform:translateY(-3px); }
.hero-nav:active { transform:translateY(0); }
@media (max-width: 767.98px){
  .hero-nav { width:46px; height:46px; font-size:1.1rem; bottom:.9rem; right:.9rem; }
  .hero-nav.hero-prev { right:4.7rem; }
}

/* Accessibility focus */
.hero-dot:focus-visible, .hero-nav:focus-visible { outline:3px solid var(--primary-color); outline-offset:3px; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .hero-slide { transition:none; }
  .hero-nav, .hero-dot { transition:none; }
}

/* =============================
   Best Sellers Section Styles
   ============================= */
.home-main-wrapper { background: #fafafa; }
.section-block { position: relative; }
.section-best-sellers { background: #f1f9fa; border-radius: 40px 40px 0 0; margin-top: -40px; padding-top: 80px !important; }
@media (max-width: 991.98px){ .section-best-sellers { border-radius: 28px 28px 0 0; padding-top: 70px !important; } }
@media (max-width: 575.98px){ .section-best-sellers { border-radius: 22px 22px 0 0; padding-top: 60px !important; } }

.section-title { font-size: clamp(1.85rem, 2.2vw, 3rem); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: linear-gradient(90deg,var(--pink-600), var(--pink-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-underline { height: 6px; position: relative; width: 240px; background: linear-gradient(90deg,rgba(var(--primary-color-rgb),0.25),rgba(var(--primary-color-rgb),0.08)); border-radius: 6px; overflow: hidden; }
.section-underline span { position:absolute; left:0; top:0; bottom:0; width:40%; background: var(--primary-color); border-radius: 6px; }

/* Product Slider */
.product-slider { position: relative; }
.ps-viewport { overflow: hidden; }
.ps-track { display: flex; gap: 28px; scroll-behavior: smooth; padding: 8px 0 12px; }
.ps-card { flex: 0 0 calc(25% - 21px); background: #ffffff; border-radius: 26px; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.1); display: flex; flex-direction: column; position: relative; transition: all .4s ease; }
.ps-card:hover { transform: translateY(-6px); box-shadow:0 16px 38px -12px rgba(0,0,0,0.18); }
.ps-media { width:100%; aspect-ratio: 4/3; background:#f2f2f3; border-radius: 26px 26px 0 0; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.ps-media img { width:100%; height:100%; object-fit:cover; transition: transform .7s ease; }
.ps-card:hover .ps-media img { transform: scale(1.08); }
.ps-body { padding: 22px 22px 20px; display:flex; flex-direction:column; gap:18px; }
.ps-name a{ font-size: .84rem;line-height: 1.32; font-weight:700; line-height:1.3; color:#2d2d35; letter-spacing:.3px; margin:0; text-transform:uppercase; }
.ps-bottom { margin-top:auto; }
.ps-price-btn { width:100%; background: linear-gradient(110deg,var(--pink-700) 0%, var(--pink-600) 40%, var(--pink-500) 70%, var(--pink-400) 100%); background-size:180% 100%; background-position:0% 50%; color:#fff; border:none; padding:14px 22px; font-size:1rem; font-weight:600; border-radius: 40px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition: background-position .9s cubic-bezier(.22,.61,.36,1), transform .35s ease, box-shadow .35s ease; box-shadow:0 8px 24px -6px rgba(var(--primary-color-rgb),0.35); position:relative; overflow:hidden; }
.ps-price-btn::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 0% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%); mix-blend-mode:overlay; opacity:0; transition:opacity .6s ease; }
.ps-price-btn:hover { background-position:100% 50%; transform: translateY(-2px); box-shadow:0 16px 38px -8px rgba(var(--primary-color-rgb),0.5); }
.ps-price-btn:hover::before { opacity:1; }
.ps-price-btn i { font-size:.9rem; }

/* Slider arrows */
.ps-nav { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:0 8px; }
.ps-arrow { pointer-events:auto; width:66px; height:66px; border-radius:50%; border:2px solid rgba(var(--primary-color-rgb),0.35); background:rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.2rem; color:var(--primary-color); transition:all .35s ease; position:relative; }
.ps-arrow:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); transform:translateY(-3px); }
.ps-arrow:active { transform:translateY(0); }

/* Responsive card widths */
@media (max-width: 1399.98px){ .ps-card { flex:0 0 calc(25% - 21px); } }
@media (max-width: 1199.98px){ .ps-card { flex:0 0 calc(33.333% - 19px); } }
@media (max-width: 991.98px){ .ps-card { flex:0 0 calc(50% - 16px); } .ps-track { gap:22px; } .ps-arrow { width:58px; height:58px; } }
@media (max-width: 575.98px){ .ps-card { flex:0 0 85%; } .ps-track { gap:18px; } .ps-arrow { width:52px; height:52px; } }

/* Scroll mask edges */
.product-slider::before, .product-slider::after { content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none; z-index:10; }
.product-slider::before { left:0; background:linear-gradient(90deg,#f1f9fa 0%, rgba(241,249,250,0) 100%); }
.product-slider::after { right:0; background:linear-gradient(-90deg,#f1f9fa 0%, rgba(241,249,250,0) 100%); }

/* Hide arrows when not scrollable */
.ps-arrow[disabled] { opacity:.3; cursor:default; transform:none; }

/* Touch drag state (optional future) */
.ps-track.dragging { scroll-behavior:auto; }

/* =============================
  Promo Banners (two images)
  ============================= */
.section-promos { margin-top: -10px; }
.promo-banners { width:100%; }
.promo-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:34px; }
@media (max-width: 991.98px){ .promo-grid { gap:26px; } }
@media (max-width: 767.98px){ .promo-grid { grid-template-columns:1fr; gap:22px; } }

.promo-item { position:relative; display:block; overflow:hidden; border-radius:34px; aspect-ratio: 16/6.2; background:#ddd; isolation:isolate; }
@media (max-width: 1199.98px){ .promo-item { aspect-ratio: 16/7; } }
@media (max-width: 767.98px){ .promo-item { aspect-ratio: 16/9; border-radius:26px; } }
.promo-item img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter 1s ease; }
.promo-overlay { position:absolute; inset:0; background: linear-gradient(120deg, rgba(var(--primary-color-rgb),0.35), rgba(var(--primary-color-rgb),0.05)); opacity:.0; mix-blend-mode:normal; transition:opacity .6s ease; z-index:2; }
.promo-meta { position:absolute; left:40px; bottom:34px; z-index:3; color:#fff; display:flex; flex-direction:column; gap:12px; max-width:55%; }
@media (max-width: 991.98px){ .promo-meta { left:28px; bottom:28px; } }
@media (max-width: 767.98px){ .promo-meta { left:22px; bottom:22px; max-width:70%; } }
.promo-title { font-size: clamp(1.4rem,2.1vw,2.4rem); font-weight:800; letter-spacing:.5px; margin:0; text-transform:uppercase; text-shadow:0 4px 18px rgba(0,0,0,0.25); }
.promo-link { font-size:.95rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,0.4); padding:10px 18px; border-radius:40px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:all .45s ease; box-shadow:0 8px 22px -6px rgba(0,0,0,0.35); }
.promo-link i { font-size:.85rem; transition: transform .45s ease; }
.promo-item:hover img { transform: scale(1.08); filter:brightness(1.05); }
.promo-item:hover .promo-overlay { opacity:1; }
.promo-item:hover .promo-link { background:var(--brand-gradient); box-shadow:0 14px 34px -8px rgba(var(--primary-color-rgb),0.55); }
.promo-item:hover .promo-link i { transform: translateX(4px); }

/* Focus accessibility */
.promo-item:focus-visible { outline:4px solid var(--primary-color); outline-offset:3px; }

/* =============================
  Product Grid Component
  ============================= */
.home-section-heading { padding-top: 70px; }
.pg-grid { display:grid; gap: var(--pg-gap); grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
.pg-card { position:relative; background:#fff; border-radius: var(--pg-card-radius); padding:.85rem .85rem 1rem; display:flex; flex-direction:column; gap:.9rem; box-shadow:0 10px 26px -10px rgba(0,0,0,0.12); transition: all .4s ease; }
.pg-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px -14px rgba(0,0,0,0.18); }
.pg-media { width:100%; aspect-ratio:4/3; background:#f2f2f3; border-radius: calc(var(--pg-card-radius) - 4px); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pg-media img { width:100%; height:100%; object-fit:cover; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.pg-card:hover .pg-media img { transform:scale(1.08); }
.pg-info { display:flex; flex-direction:column; gap:.8rem; }
.pg-name { font-size:.84rem; line-height:1.32; font-weight:700; margin:0; letter-spacing:.3px; text-transform:uppercase; color:#2d2d35; }
.pg-name a{ font-size:.84rem; line-height:1.32; font-weight:700; margin:0; letter-spacing:.3px; text-transform:uppercase; color:#2d2d35; }
.pg-swatches { display:flex; flex-wrap:wrap; gap:6px; }
.pg-swatch { --sz: var(--pg-swatch-size); width:var(--sz); height:var(--sz); border-radius:50%; background: var(--swatch,#ccc); border:2px solid #fff; outline:2px solid rgba(0,0,0,0.15); cursor:pointer; position:relative; box-shadow:0 2px 6px -1px rgba(0,0,0,0.25); transition: all .35s ease; }
.pg-swatch:hover:not(.active):not(:disabled) { transform:translateY(-2px); box-shadow:0 4px 12px -2px rgba(0,0,0,0.3); }
.pg-swatch.active { outline-color: var(--primary-color); box-shadow:0 0 0 4px rgba(var(--primary-color-rgb),0.25); }
.pg-swatch.disabled { cursor:not-allowed; opacity:.45; filter:grayscale(1); }
.pg-price-row { margin-top:auto; }
.pg-price-btn { width:100%; background: linear-gradient(110deg,var(--pink-700) 0%, var(--pink-600) 40%, var(--pink-500) 70%, var(--pink-400) 100%); background-size:180% 100%; background-position:0% 50%; color:#fff; border:none; padding:12px 18px; font-size:.95rem; font-weight:600; border-radius: 32px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition: background-position .9s cubic-bezier(.22,.61,.36,1), transform .35s ease, box-shadow .35s ease; box-shadow:0 8px 24px -6px rgba(var(--primary-color-rgb),0.35); position:relative; overflow:hidden; }
.pg-price-btn::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 0% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%); mix-blend-mode:overlay; opacity:0; transition:opacity .6s ease; }
.pg-price-btn:hover { background-position:100% 50%; transform: translateY(-2px); box-shadow:0 16px 38px -8px rgba(var(--primary-color-rgb),0.5); }
.pg-price-btn:hover::before { opacity:1; }
.pg-price-btn i { font-size:.85rem; }
.pg-more-wrapper { margin-top: clamp(1.5rem,3vw,2.4rem); }
.pg-more-btn { width:100%; background: #fff; border:2px solid var(--pink-200); padding:1rem 1.25rem; border-radius: 46px; font-weight:700; font-size:1rem; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:10px; color: var(--pink-700); position:relative; overflow:hidden; cursor:pointer; transition: all .5s cubic-bezier(.22,.61,.36,1); box-shadow:0 8px 26px -8px rgba(var(--primary-color-rgb),0.15); }
.pg-more-btn:hover { background: var(--brand-gradient); color:#fff; border-color:var(--pink-400); box-shadow:0 14px 44px -10px rgba(var(--primary-color-rgb),0.55); transform:translateY(-3px); }
.pg-more-btn:active { transform:translateY(0); }
.pg-filter .nav-link { background:rgba(var(--primary-color-rgb),0.12); color:var(--pink-700); font-weight:600; border-radius:40px; padding:.55rem 1.1rem; transition:all .4s ease; letter-spacing:.4px; }
.pg-filter .nav-link:hover { background:rgba(var(--primary-color-rgb),0.22); }
.pg-filter .nav-link.active { background:var(--brand-gradient); color:#fff; box-shadow:0 6px 20px -4px rgba(var(--primary-color-rgb),0.5); }
.pg-filter .nav-link:focus-visible { outline:3px solid var(--primary-color); outline-offset:2px; }

/* Responsive adjustments integrated with general responsive file (fallback if not loaded) */
@media (max-width: 1199.98px) { .pg-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); } }
@media (max-width: 991.98px) { .home-section-heading { padding-top:60px; } .pg-grid { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); } .pg-more-btn { font-size:.9rem; } }
@media (max-width: 767.98px) { .home-section-heading { padding-top:50px; } .pg-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pg-card { padding:.7rem .7rem .85rem; } .pg-name { font-size:.75rem; } .pg-swatch { --pg-swatch-size:18px; } }
@media (max-width: 575.98px) { .pg-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pg-more-btn { padding:.85rem 1rem; font-size:.85rem; } }

/* =============================
  Service Features Pills
  ============================= */
.service-features { padding: 70px 0 40px; border-top:1px solid rgba(var(--primary-color-rgb),0.18); }
.sf-wrapper { display:flex; gap:44px; justify-content:space-between; flex-wrap:wrap; }
.sf-item { flex:1 1 22%; min-width:220px; background:#fff; border:1px solid rgba(var(--primary-color-rgb),0.25); border-radius:120px; padding:22px 34px; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden; isolation:isolate; transition: all .45s cubic-bezier(.22,.61,.36,1); box-shadow:0 6px 20px -8px rgba(var(--primary-color-rgb),0.15); }
.sf-item::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(var(--primary-color-rgb),0.08), rgba(var(--primary-color-rgb),0)); opacity:0; transition:opacity .6s ease; }
.sf-icon { width:54px; height:54px; border-radius:50%; background: linear-gradient(140deg, var(--pink-200), var(--pink-400)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; position:relative; box-shadow:0 10px 24px -8px rgba(var(--primary-color-rgb),0.4); }
.sf-text { font-weight:600; font-size:1rem; color:#2d2d35; letter-spacing:.3px; }
.sf-item:hover { transform:translateY(-6px); border-color: var(--pink-400); box-shadow:0 14px 38px -12px rgba(var(--primary-color-rgb),0.45); }
.sf-item:hover::before { opacity:1; }
.sf-item:active { transform:translateY(-2px); }
.sf-item:focus-visible { outline:4px solid var(--primary-color); outline-offset:4px; }

@media (max-width: 1199.98px){ .sf-wrapper { gap:32px; } .sf-item { padding:20px 28px; } }
@media (max-width: 991.98px){ .service-features { padding:60px 0 34px; } .sf-item { flex:1 1 calc(50% - 32px); } }
@media (max-width: 767.98px){ .sf-wrapper { gap:22px; } .sf-item { flex:1 1 100%; border-radius:90px; padding:18px 26px; } .sf-icon { width:50px; height:50px; font-size:1.25rem; } }
@media (max-width: 575.98px){ .service-features { padding:50px 0 30px; } .sf-item { padding:16px 24px; gap:14px; } .sf-text { font-size:.92rem; } }

/* =============================
  Fit Guide Component
  ============================= */
.fit-guide { padding: 40px 0 90px; }
.fg-inner { position:relative; }
.fg-visual { position:relative; width:100%; max-width:520px; margin:0 auto 40px; }
.fg-visual picture, .fg-visual img { display:block; width:100%; height:auto; border-radius:32px; object-fit:cover; }
.fg-heading-pill { background: rgba(var(--primary-color-rgb),0.08); padding:24px 46px; border-radius:90px; display:inline-block; margin:0 0 40px; }
.fg-heading { font-size: clamp(1.65rem,2.6vw,3.2rem); font-weight:800; letter-spacing:.8px; margin:0; background:linear-gradient(90deg,var(--pink-600), var(--pink-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fg-list { display:flex; flex-direction:column; gap:56px; }
.fg-row { position:relative; display:flex; align-items:flex-start; gap:42px; padding:0 0 42px; text-decoration:none; color:inherit; }
.fg-row::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.35), rgba(var(--primary-color-rgb),0.15)); border-radius:3px; overflow:hidden; }
/* Animated gradient overlay line (initial collapsed) */
.fg-row::before { content:""; position:absolute; left:0; bottom:0; height:2px; width:0%; background: linear-gradient(110deg,var(--pink-700), var(--pink-500), var(--pink-400)); border-radius:3px; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
.fg-row:hover::before, .fg-row:focus-visible::before { width:100%; }
.fg-row-title { font-size: clamp(1.2rem,1.4vw,2.15rem); font-weight:800; letter-spacing:.6px; margin:0 0 12px; line-height:1.15; }
.fg-row-desc { font-size:.95rem; font-weight:500; margin:0; color:#3c3c44; max-width:620px; }
.fg-row-icon { margin-left:auto; font-size:2.4rem; line-height:1; display:flex; align-items:center; color: var(--pink-500); transition: transform .6s cubic-bezier(.22,.61,.36,1), color .5s ease; }
.fg-row:hover .fg-row-icon { transform:translateX(8px); color: var(--pink-600); }
.fg-row:focus-visible { outline:4px solid var(--primary-color); outline-offset:6px; border-radius:4px; }

/* Visual offset fancy overlap (optional future) */
@media (min-width: 992px){ .fg-visual { margin:-30px 0 0; } }

/* Spacing adjustments (user request: give more breathing room) */
@media (min-width: 992px){
  .fg-content-col { padding-left: 90px; }
}

/* Slightly larger vertical separation between rows */
@media (min-width: 768px){
  .fg-list { gap:64px; }
  .fg-row { padding-bottom:48px; }
}

/* Responsive adjustments */
@media (max-width: 1199.98px){ .fg-row { gap:32px; } .fg-list { gap:52px; } }
@media (max-width: 991.98px){ .fit-guide { padding: 40px 0 70px; } .fg-visual { margin:0 0 50px; max-width:480px; } .fg-row { padding-bottom:38px; gap:30px; } .fg-row-title { font-size: clamp(1.3rem,2vw,2rem); } }
@media (max-width: 767.98px){ .fg-heading-pill { padding:18px 30px; margin-bottom:34px; } .fg-list { gap:46px; } .fg-row { gap:24px; padding-bottom:34px; } .fg-row-icon { font-size:2rem; } }
@media (max-width: 575.98px){ .fg-heading { font-size: clamp(1.65rem,9vw,2.4rem); } .fg-row-title { font-size:1.35rem; } .fg-row-desc { font-size:.9rem; } .fg-row { padding-bottom:30px; gap:20px; } .fg-list { gap:38px; } }

/* =============================
  About Highlight Section
  ============================= */
.about-highlight { padding: 40px 0 120px; }
.ah-block { background: linear-gradient(135deg, var(--pink-200), var(--pink-100)); border-radius: 60px; padding: 90px clamp(2rem,6vw,110px) 110px; position:relative; overflow:hidden; }
.ah-block::after { content:""; position:absolute; right:-120px; bottom:-160px; width:520px; height:520px; background: radial-gradient(circle at 30% 30%, rgba(var(--primary-color-rgb),0.28), rgba(var(--primary-color-rgb),0)); filter:blur(8px); opacity:.55; }
.ah-heading { font-size: clamp(1.6rem,2.4vw,2.8rem); font-weight:800; letter-spacing:.6px; line-height:1.18; margin:0 0 42px; color: var(--pink-700); }
.ah-paragraph { display:flex; flex-direction:column; gap:22px; margin-bottom:50px; }
/* Per-character reveal: base line holds char spans */
.ah-line { font-size:1.05rem; font-weight:600; line-height:1.62; position:relative; display:block; }
.ah-line::selection { background: var(--pink-300); }
.ah-line-char { display:inline-block; opacity:0; transform:translateY(12px) scale(.95); filter:blur(6px); background:linear-gradient(90deg,var(--pink-600),var(--pink-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ah-line-char.space { width:0.25em; } /* Preserve spacing for space characters */
.ah-line-char.visible { animation: ahCharIn .7s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes ahCharIn { to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); color:#2d2d35; background:none; } }

.ah-cta-wrapper { display:flex; }
.ah-cta { background: var(--brand-gradient); color:#fff; border:none; border-radius: 60px; padding:20px 46px; font-size:1.05rem; font-weight:700; letter-spacing:.6px; display:inline-flex; align-items:center; gap:14px; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 10px 34px -12px rgba(var(--primary-color-rgb),0.45); transition: all .55s cubic-bezier(.22,.61,.36,1); }
.ah-cta::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0.4), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:0; transition:opacity .7s ease; }
.ah-cta:hover { transform:translateY(-4px); box-shadow:0 18px 46px -14px rgba(var(--primary-color-rgb),0.6); }
.ah-cta:hover::before { opacity:1; }
.ah-cta:active { transform:translateY(-1px); }
.ah-cta i { font-size:1rem; }

.ah-media-card { position:relative; border-radius:26px; overflow:hidden; background:#fff; margin:0; box-shadow:0 14px 38px -14px rgba(0,0,0,0.25); border:4px solid #fff; }
.ah-media-ratio { position:relative; width:100%; aspect-ratio: 4/4.6; background:#ececec; overflow:hidden; }
.ah-media-ratio img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.ah-media-card:hover .ah-media-ratio img { transform:scale(1.08); }
.ah-media-caption { position:absolute; left:0; right:0; bottom:0; padding:26px 28px 22px; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.75)); color:#fff; display:flex; flex-direction:column; gap:8px; }
.ah-media-title { margin:0; font-size:1.05rem; font-weight:800; letter-spacing:.5px; }
.ah-media-meta { margin:0; font-size:.78rem; font-weight:500; opacity:.9; }
.ah-media-link { position:absolute; right:20px; bottom:20px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition:all .45s ease; }
.ah-media-card:hover .ah-media-link { background:var(--brand-gradient); }

/* Scroll reveal stagger base state */
/* Remove previous line-level transform animation (handled per char) */

/* Responsive adjustments */
@media (max-width: 1399.98px){ .ah-block { padding: 80px 70px 100px; } }
@media (max-width: 1199.98px){ .ah-block { padding:70px 60px 90px; } }
@media (max-width: 991.98px){ .about-highlight { padding: 10px 0 100px; } .ah-block { border-radius:50px; } .ah-media-col { order:-1; } .ah-heading { margin-bottom:34px; } .ah-paragraph { margin-bottom:44px; } }
@media (max-width: 767.98px){ .ah-block { padding:60px 42px 80px; } .ah-heading { font-size: clamp(1.7rem,6.2vw,2.4rem); } .ah-paragraph { gap:18px; } .ah-media-ratio { aspect-ratio:4/5.2; } .ah-cta { width:100%; justify-content:center; padding:18px 34px; } }
@media (max-width: 575.98px){ .ah-block { padding:54px 30px 70px; border-radius:42px; } .ah-paragraph { gap:16px; } .ah-line { font-size:.98rem; } }

/* Social Media Section */
.social-media-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
    clear: both;
    display: block;
    width: 100%;
}

/* Header Styles */
.social-header {
    margin-bottom: 3rem;
}

.social-title {
    font-size: clamp(2.8rem, 4.2vw, 5.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 0.9;
    background: linear-gradient(90deg, var(--pink-600), #52c4b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}

.social-subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    color: #3c3c44;
    margin: 18px 0 0;
    line-height: 1.45;
}

.social-follow-text {
    font-size: clamp(1.8rem, 2.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(82, 196, 184, 0.25);
    -webkit-text-stroke: 1px rgba(82, 196, 184, 0.4);
    position: relative;
}

.social-follow-text::before {
    content: '';
    position: absolute;
    left: -3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2px;
    background: rgba(82, 196, 184, 0.4);
}

.social-slider-wrapper {
    position: relative;
    overflow: hidden;
    margin-left: -2rem;
    margin-right: -2rem;
    mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
}

.social-slider {
    display: flex;
    gap: 2rem;
    animation: socialSlide 20s infinite linear;
    will-change: transform;
    width: max-content;
    padding: 10px 0 20px;
}

.social-slider:hover {
    animation-play-state: paused;
}

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

.social-card {
    flex: 0 0 400px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: block;
    background: #fff;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.social-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.social-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.social-card:hover .social-bg-image {
    transform: scale(1.05);
}

.social-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

.instagram-card .social-overlay {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.8) 0%, rgba(251, 173, 80, 0.6) 100%);
}

.youtube-card .social-overlay {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.6) 100%);
}

.social-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}

.social-platform-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.social-platform-icon i {
    font-size: 1.8rem;
    color: white;
}

.social-platform-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.social-username {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    font-weight: 400;
    color: white;
}

.social-journey h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.social-journey p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 2rem;
    color: white;
}

.btn-social-action {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--secondary-pink) 100%);
    color: white !important;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    align-self: flex-start;
}

.btn-social-action:hover {
    background: linear-gradient(135deg, var(--secondary-pink) 0%, var(--primary-pink) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--primary-pink-rgb), 0.4);
    color: white !important;
    text-decoration: none;
}

.btn-social-action i {
    transition: transform 0.3s ease;
}

.btn-social-action:hover i {
    transform: translateX(3px);
}

/* Responsive Design for Social Media */
@media (max-width: 1199.98px) {
    .social-card {
        flex: 0 0 340px;
    }
    
    .social-slider {
        gap: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .social-header {
        margin-bottom: 2.5rem;
    }
    
    .social-card {
        flex: 0 0 300px;
        height: 450px;
    }
}

@media (max-width: 767.98px) {
    .social-follow-text {
        text-align: left;
        margin-top: 20px;
    }
    
    .social-follow-text::before {
        display: none;
    }
    
    .social-card {
        flex: 0 0 280px;
        height: 400px;
    }
    
    .social-content {
        padding: 1.5rem;
    }
    
    .social-platform-name {
        font-size: 1.5rem;
    }
    
    .social-journey h4 {
        font-size: 1rem;
    }
    
    .social-journey p {
        font-size: 0.9rem;
    }
    
    .social-slider {
        gap: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .social-card {
        flex: 0 0 260px;
    }
    
    .social-slider {
        gap: 1rem;
    }
}

/* =============================
  Blog Section Component - Masonry Layout
  ============================= */
.blog-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 80px 0 120px 0; /* Thêm padding bottom lớn hơn */
    min-height: 150vh; /* Đảm bảo có đủ chiều cao để test sticky */
}

/* Left Column - Sticky Title - JavaScript Controlled */
.blog-title-wrapper {
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    /* Debug styling để thấy rõ khi sticky */
    border: 2px solid #e7548a;
    box-shadow: 0 10px 30px rgba(231, 84, 138, 0.2);
}

.blog-main-title {
    font-size: clamp(3rem, 5vw, 6rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, var(--pink-500), #52c4b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.blog-title-accent {
    display: block;
    font-size: 0.8em;
    margin-top: 0.2em;
}

.blog-cta-btn {
    background: linear-gradient(135deg, #52c4b8, var(--pink-500));
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(82, 196, 184, 0.3);
    text-decoration: none;
}

.blog-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(82, 196, 184, 0.4);
    color: white;
    text-decoration: none;
}

.blog-cta-btn i {
    transition: transform 0.3s ease;
}

.blog-cta-btn:hover i {
    transform: translate(3px, -3px);
}

/* Right Column - Posts Container - 2 Column Masonry */
.blog-posts-container {
    display: flex;
    gap: 30px;
    position: relative;
}

.blog-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog-column-left {
    margin-top: 0;
}

.blog-column-right {
    margin-top: 60px; /* Offset for staggered effect */
}

/* Blog Post Base Styles */
.blog-post {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(30px);
    width: 100%;
}

.blog-post.visible,
.blog-post.revealed {
    opacity: 1;
    transform: translateY(0);
}

.blog-post:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Post Height Variations */
.post-tall {
    min-height: 550px;
}

.post-short {
    min-height: 400px;
}

/* Dashed Border Style */
.post-dashed {
    border: 3px dashed var(--primary-color);
    background: #fff;
    padding: 15px;
}

.post-dashed .blog-post-image {
    border-radius: 15px;
    overflow: hidden;
}

.blog-post-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.post-tall .blog-post-image {
    height: 320px;
}

.post-short .blog-post-image {
    height: 200px;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-post:hover .blog-post-image img {
    transform: scale(1.05);
}

.blog-post-category {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: linear-gradient(135deg, #52c4b8, var(--pink-500));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    max-width: calc(100% - 3rem);
    line-height: 1.2;
}

.blog-post-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-post-title a{
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #2d2d35;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-grow: 1;
}

.post-tall .blog-post-title {
    font-size: 1.3rem;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    margin-top: auto;
}

.blog-meta-category a{
    font-weight: 600;
    color: var(--pink-600);
}

.blog-meta-divider {
    color: #ccc;
}

.blog-meta-date {
    color: #888;
}

.blog-read-more {
    margin-left: auto;
    color: var(--pink-600);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.blog-read-more:hover {
    color: var(--pink-700);
    text-decoration: none;
}

.blog-read-more i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.blog-read-more:hover i {
    transform: translateX(3px);
}

/* Scroll Reveal Animation */
.blog-post[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.blog-post[data-scroll-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delay */
.blog-column-left .blog-post[data-scroll-reveal]:nth-child(1) { transition-delay: 0.1s; }
.blog-column-left .blog-post[data-scroll-reveal]:nth-child(2) { transition-delay: 0.3s; }
.blog-column-left .blog-post[data-scroll-reveal]:nth-child(3) { transition-delay: 0.5s; }
.blog-column-right .blog-post[data-scroll-reveal]:nth-child(1) { transition-delay: 0.2s; }
.blog-column-right .blog-post[data-scroll-reveal]:nth-child(2) { transition-delay: 0.4s; }

/* Responsive Design */
@media (max-width: 1199.98px) {
    .blog-main-title {
        font-size: clamp(2.5rem, 4.5vw, 5rem);
    }
    
    .blog-posts-container {
        gap: 25px;
    }
}

@media (max-width: 991.98px) {
    .blog-title-wrapper {
        position: static !important; /* Force static trên mobile */
        text-align: center;
        padding: 2rem 1rem 3rem 1rem;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .blog-main-title {
        margin-bottom: 2rem;
    }
    
    .blog-posts-container {
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .blog-section {
        padding: 60px 0;
    }
    
    .blog-posts-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .blog-column-right {
        margin-top: 0;
    }
    
    .blog-main-title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }
    
    .post-tall,
    .post-short {
        min-height: auto;
    }
    
    .post-tall .blog-post-image,
    .post-short .blog-post-image {
        height: 220px;
    }
    
    .blog-post-content {
        padding: 1.25rem;
    }
    
    .blog-post-title {
        font-size: 1rem;
    }
    
    .post-tall .blog-post-title {
        font-size: 1.1rem;
    }
    
    .blog-post-category {
        font-size: 0.65rem;
        padding: 0.4rem 0.8rem;
        top: 1rem;
        left: 1rem;
    }
}

@media (max-width: 575.98px) {
    .blog-cta-btn {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
    
    .blog-post-title {
        font-size: 0.95rem;
    }
    
    .post-tall .blog-post-title {
        font-size: 1rem;
    }
    
    .blog-posts-container {
        gap: 15px;
    }
    
    .blog-post-content {
        padding: 1rem;
    }
}