/* ============================================================
   AETHERIS HOMEPAGE — Vanilla CSS
   Prefix: .aeth- để tránh xung đột với theme mặc định
   ============================================================ */

/* === Design tokens — Section spacing system === */
:root {
    /* 5 tầng spacing cho nhịp thị giác luxury (8px grid):
       lg = giữa các major section (Hero→Spotlight, Spotlight→BS)
       md = giữa các section liên quan (Partners→Reviews)
       sm = visual break nhỏ (Marquee)
       xs = inner section spacing
       2xs = element-level spacing */
    --aeth-gap-lg: 5rem;
    /* 80px */
    --aeth-gap-md: 3.5rem;
    /* 56px */
    --aeth-gap-sm: 2rem;
    /* 32px */
    --aeth-gap-xs: 1rem;
    /* 16px */
    --aeth-gap-2xs: 0.5rem;
    /* 8px */
}

@media(max-width:767px) {
    :root {
        --aeth-gap-lg: 3.5rem;
        /* 56px */
        --aeth-gap-md: 2.5rem;
        /* 40px */
        --aeth-gap-sm: 1.5rem;
        /* 24px */
        --aeth-gap-xs: 1rem;
        /* 16px */
        --aeth-gap-2xs: 0.5rem;
        /* 8px */
    }
}

/* === Reset cho AETHERIS sections === */
.main-aetheris {
    padding: 0 !important;
    margin: 0 !important;
}

/* Đẩy nội dung chính xuống trên các trang được yêu cầu (chi tiết sản phẩm, giỏ hàng, chính sách) 
   để tránh bị menu cố định (.aeth-nav) đè lên nội dung trên cả PC và Mobile, loại trừ trang danh mục (collection) */
body.product .main-aetheris,
body.cart .main-aetheris,
body.page .main-aetheris {
    padding-top: 80px !important; /* Chiều cao header trên PC ~74px + 6px khoảng đệm an toàn */
}

@media(max-width:767px) {
    body.product .main-aetheris,
    body.cart .main-aetheris,
    body.page .main-aetheris {
        padding-top: 60px !important; /* Chiều cao header trên Mobile ~59px + 1px khoảng đệm an toàn */
    }
}

.main-aetheris * {
    box-sizing: border-box;
}

/* Screen-reader only — ẩn visual nhưng accessible cho screen readers (Fix #7) */
.aeth-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Material Symbols — font icon settings */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* === NAV === */
.aeth-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease;
}

/* === Scroll state — glassmorphism TỪNG CỤM (pill) giống seed.com === */

/* Khi scroll: chỉ thêm nền + blur + viền (border-radius, padding, height đã sẵn ở mặc định) */
.aeth-nav.scrolled .aeth-logo,
.aeth-nav.scrolled .aeth-nav-links,
.aeth-nav.scrolled .aeth-nav-actions {
    background: rgba(87, 94, 85, 0.4);
    backdrop-filter: blur(38px);
    -webkit-backdrop-filter: blur(38px);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Logo đen → trắng khi scroll (đồng bộ nền tối) */
.aeth-nav.scrolled .aeth-logo img {
    filter: brightness(0) invert(1);
}

/* Đảo màu chữ/icon sang trắng khi scroll trên nền tối */
.aeth-nav.scrolled .aeth-nav-links a {
    color: rgba(255, 255, 255, 0.85);
}

.aeth-nav.scrolled .aeth-nav-links a:hover,
.aeth-nav.scrolled .aeth-nav-links a.active {
    color: #fff;
}

.aeth-nav.scrolled .aeth-nav-links a.active {
    border-bottom-color: #fff;
}

.aeth-nav.scrolled .aeth-nav-icon {
    color: rgba(255, 255, 255, 0.85);
}

.aeth-nav.scrolled .aeth-nav-icon:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.aeth-nav.scrolled .aeth-hamburger-line {
    background: #fff;
}

/* Mobile: hamburger cũng thành pill khi scroll */
@media(max-width:767px) {
    .aeth-nav.scrolled .aeth-hamburger {
        background: rgba(87, 94, 85, 0.4);
        backdrop-filter: blur(38px);
        -webkit-backdrop-filter: blur(38px);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

.aeth-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.aeth-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Pill sẵn: border-radius + padding + height cố định — transition mượt khi scroll */
    border-radius: 100px;
    border: 1px solid transparent;
    padding: 0.45rem 1.2rem;
    height: 48px;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.aeth-logo img {
    height: 36px;
    width: auto;
    transition: filter 0.3s ease;
}

.aeth-nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    /* Pill sẵn: đồng bộ kích thước với logo và icons */
    border-radius: 100px;
    border: 1px solid transparent;
    padding: 0.45rem 1.2rem;
    height: 48px;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.aeth-nav-links a {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: #52525b;
    transition: color 0.3s;
    letter-spacing: 0.05em;
}

.aeth-nav-links a:hover,
.aeth-nav-links a.active {
    color: #000;
}

.aeth-nav-links a.active {
    border-bottom: 2px solid #000;
    padding-bottom: 0.15rem;
}

.aeth-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Pill sẵn: đồng bộ kích thước với logo và menu */
    border-radius: 100px;
    border: 1px solid transparent;
    padding: 0.45rem 1.2rem;
    height: 48px;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

/* Icon link — đạt chuẩn A11y tap target 44×44px */
.aeth-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #3f3f46;
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease;
    touch-action: manipulation;
}

/* Hover: background nhẹ + nét đậm hơn → tạo depth */
.aeth-nav-icon:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active: pressed feedback (Guideline #30) */
.aeth-nav-icon:active {
    background-color: rgba(0, 0, 0, 0.08);
    transform: scale(0.95);
}

/* Focus-visible: keyboard accessibility (Guideline #28) */
.aeth-nav-icon:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* SVG icon — nét mảnh 1.5px, hover thêm depth */
.aeth-nav-icon svg {
    transition: stroke-width 0.25s ease, filter 0.25s ease;
}

.aeth-nav-icon:hover svg {
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Cart badge — số lượng sản phẩm */
.aeth-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Badge pulse animation khi có sản phẩm mới */
@keyframes aethBadgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.aeth-cart-badge.pulse {
    animation: aethBadgePulse 0.4s ease;
}

/* === HERO === */
.aeth-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 5; /* Khớp ảnh PC 1920×800 — hiển thị đầy đủ, không crop */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    /* margin-bottom: var(--aeth-gap-lg); */ /* Ẩn theo yêu cầu */
}

.aeth-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.aeth-hero img.aeth-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.aeth-hero-content {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: 0 1rem;
}

.aeth-hero h1,
.aeth-hero-title {
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.aeth-btn-white {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 0.85rem 2.2rem;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
}

.aeth-btn-white:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* === HERO SLIDER (tối đa 3 slide, fade tự động) === */
.aeth-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Chỉ bật hiệu ứng fade khi có nhiều slide */
.aeth-hero--slider .aeth-hero-slide {
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.aeth-hero--slider .aeth-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.aeth-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: #000;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
}
.aeth-hero-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.aeth-hero-prev { left: 20px; }
.aeth-hero-next { right: 20px; }
.aeth-hero-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 10px;
}
.aeth-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.aeth-hero-dot.is-active {
    background: #fff;
    width: 26px;
}

/* === Link bấm vào ảnh banner (hero / split / banner-carousel) === */
.aeth-hero-img-link,
.aeth-split-img-link,
.aeth-bc-img-link {
    position: absolute;
    inset: 0;
    z-index: 15; /* trên lớp overlay (10), dưới nội dung/CTA (20) */
    display: block;
}
/* Lớp phủ tối chỉ để trang trí → cho click xuyên qua tới link ảnh */
.aeth-hero-overlay,
.aeth-split-left .overlay,
.aeth-bc-overlay {
    pointer-events: none;
}
/* Cho phép bấm cả vùng ảnh (đi tới link ảnh), nhưng nút CTA vẫn bấm riêng được */
.aeth-hero-content,
.aeth-split-left-content,
.aeth-bc-content {
    pointer-events: none;
}
.aeth-hero-content a,
.aeth-hero-content button,
.aeth-split-left-content a,
.aeth-split-left-content button,
.aeth-bc-content a,
.aeth-bc-content button {
    pointer-events: auto;
}

/* === SPOTLIGHT — Planetary Theme === */
.aeth-spotlight {
    /* Loại bỏ max-width và đặt background đen cho toàn bộ chiều rộng section */
    width: 100%;
    background: #000000;
    margin: 0 auto; /* Đổi sang 0 để triệt tiêu margin dưới */
    padding: var(--aeth-gap-lg) 2rem; /* Thay margin bằng padding đen */
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.aeth-spotlight-inner {
    /* Giới hạn chiều rộng tối đa và căn giữa nội dung bên trong lớp nền đen */
    max-width: 1472px; /* 1536px - 4rem padding để giữ nguyên kích thước gốc */
    width: 100%;
    margin: 0 auto;
    /* Galaxy background — gradient sâu nhiều lớp */
    background:
        radial-gradient(ellipse at 20% 50%, rgba(30, 15, 60, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(10, 25, 60, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 80%, rgba(50, 10, 40, 0.3) 0%, transparent 45%),
        #050510;
    border-radius: 0; /* Bỏ bo góc */
    overflow: hidden;
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: none; /* Bỏ viền xung quanh */
    /* Parallax starfield — default values (JS sẽ cập nhật khi mousemove) */
    --star-x1: 0px;
    --star-y1: 0px;
    --star-x2: 0px;
    --star-y2: 0px;
}

/* Lớp sao nhỏ — nhiều, mờ, nháy chậm */
.aeth-spotlight-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 25% 70%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 40% 30%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 55% 85%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 70% 10%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 15% 90%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 92% 80%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 48% 5%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 60% 45%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 33% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 78% 38%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 20% 25%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 88% 15%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 45% 60%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 8% 75%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 65% 92%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 95% 40%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 52% 22%, rgba(255, 255, 255, 0.6), transparent);
    background-size: 100% 100%;
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    /* Parallax layer 1 — sao nhỏ, di chuyển chậm (4px max) */
    transform: translate(var(--star-x1), var(--star-y1));
    transition: transform 0.15s ease-out;
    inset: -10px;
    /* mở rộng hơn inset để không thấy cạnh khi dịch chuyển */
}

/* Lớp sao sáng — ít hơn, lớn hơn, nháy nhanh */
.aeth-spotlight-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(2px 2px at 12% 40%, rgba(200, 220, 255, 0.9), transparent),
        radial-gradient(2px 2px at 35% 18%, rgba(255, 240, 200, 0.8), transparent),
        radial-gradient(2px 2px at 58% 72%, rgba(200, 220, 255, 0.85), transparent),
        radial-gradient(2px 2px at 82% 30%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 25% 55%, rgba(180, 200, 255, 0.7), transparent),
        radial-gradient(2px 2px at 72% 88%, rgba(255, 240, 220, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 90% 65%, rgba(200, 220, 255, 0.85), transparent),
        radial-gradient(2px 2px at 45% 42%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 18% 80%, rgba(220, 200, 255, 0.7), transparent),
        radial-gradient(2px 2px at 68% 15%, rgba(255, 255, 255, 0.8), transparent);
    background-size: 100% 100%;
    animation: twinkle 3s ease-in-out 1.5s infinite alternate;
    pointer-events: none;
    /* Parallax layer 2 — sao sáng, di chuyển nhanh hơn (8px max) → parallax depth */
    transform: translate(var(--star-x2), var(--star-y2));
    transition: transform 0.15s ease-out;
    inset: -10px;
}

/* Keyframe nháy sáng — opacity dao động */
@keyframes twinkle {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.5;
    }
}

/* --- Planet Layer --- */
.planet-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Mỗi planet — 3 trạng thái: foreground / background / hidden */
.planet {
    position: absolute;
    left: 50%;
    width: 500px;
    height: 500px;
    margin-left: -250px;
    opacity: 0;
    bottom: -500px;
    /* ẩn bên dưới */
    z-index: 1;
    will-change: transform, opacity;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        width 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        height 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Foreground — hành tinh chính, curve thoải full-width */
.planet.foreground {
    opacity: 1;
    width: 1400px;
    height: 1400px;
    z-index: 3;
}

/* Background — hành tinh tiếp theo, NHỎ, mờ ảo, ở phía trên xa */
.planet.background {
    opacity: 0.4;
    bottom: 65%;
    width: 140px;
    height: 140px;
    margin-left: -450px;
    z-index: 2;
}

/* Sphere — hình ảnh hành tinh thực tế */
.planet-sphere {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Glow — atmospheric halo */
.planet-glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
}


/* --- Spotlight Content (text + product) --- */
.spotlight-content {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    padding: 3rem 2rem;
}

.variant-content {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 32rem;
}

/* Desktop: căn trái */
@media(min-width:768px) {
    .spotlight-content {
        justify-content: flex-start;
        padding: 3rem 4rem;
    }

    .variant-content {
        align-items: flex-start;
        text-align: left;
    }
}

.variant-content.active {
    display: flex;
    animation: aethContentIn 0.7s ease-out 0.15s both;
}

@keyframes aethContentIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bottle entrance — blur-to-sharp + slide up ("teleport" effect) */
@keyframes aethBottleEntrance {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(25px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        filter: blur(0);
    }
}

/* Mobile bottle entrance — không có translateX(-50%) */
@keyframes aethBottleEntranceMobile {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.aeth-bottle-mobile {
    animation: aethBottleEntranceMobile 0.8s ease-out 0.2s both;
}

.aeth-spotlight-tag {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #a1a1aa;
}

.aeth-spotlight h2 {
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.aeth-spotlight-desc {
    font-family: 'Inter', sans-serif;
    color: #d4d4d8;
    /* Fix #3: contrast 7.4:1 trên nền #050510 — WCAG AA ✅ (trước: #a1a1aa = 3.1:1 ❌) */
    font-size: 0.875rem;
    max-width: 24rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
    line-height: 1.7;
}

/* Bottle mobile — hiện trên mobile, ẩn trên desktop */
.aeth-bottle-mobile {
    width: 10rem;
    aspect-ratio: 3/4;
    margin-bottom: 2rem;
    z-index: 10;
}

.aeth-bottle-mobile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 40px rgba(255, 255, 255, 0.2));
}

/* Bottle desktop — mặc định ẩn hoàn toàn */
.aeth-bottle {
    display: none;
}

.aeth-bottle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 3D Drop-shadow: sharp (gần) → soft (giữa) → ambient glow (xa) */
    filter:
        drop-shadow(0 4px 5px rgba(255, 255, 255, 0.35)) drop-shadow(0 10px 25px rgba(255, 255, 255, 0.2)) drop-shadow(0 15px 60px rgba(255, 255, 255, 0.15));
}

/* Desktop: ẩn mobile bottle, hiện desktop bottle */
@media(min-width:768px) {
    .aeth-bottle-mobile {
        display: none;
    }

    .aeth-spotlight .aeth-bottle.active {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 34rem;
        /* 384px — tăng kích thước cho nổi bật hơn */
        height: 75%;
        /* chiếm 75% chiều cao section */
        z-index: 10;
        /* Teleport entrance — blur-to-sharp + slide up */
        animation: aethBottleEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }
}


.aeth-btn-spotlight {
    font-family: 'Inter', sans-serif;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    background: #fff;
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.aeth-btn-spotlight:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
}

/* --- Planet Navigation (floating right) --- */
.planet-nav {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.planet-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: opacity 0.3s;
    opacity: 0.5;
    position: relative;
}

.planet-nav-item:hover,
.planet-nav-item.active {
    opacity: 1;
}

/* --- Planet hover glow --- */
.planet-nav-item:hover .planet-dot {
    transform: scale(1.3);
    box-shadow: 0 0 12px 3px currentColor;
}

.planet-nav-item:hover .planet-nav-label {
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Focus-visible — keyboard a11y */
.planet-nav-item:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
    border-radius: 8px;
    opacity: 1;
}

/* Dot hành tinh — tăng kích thước cho dễ tap */
.planet-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.planet-nav-item.active .planet-dot {
    border-color: #fff;
    transform: scale(1.2);
}

/* --- Orbit Satellite — vệ tinh sáng quay quanh dot active --- */
.planet-nav-item.active .planet-dot::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8), 0 0 15px 4px rgba(255, 255, 255, 0.3);
    top: 50%;
    left: 50%;
    /* Orbit radius = 17px (hơi ra ngoài viền dot 24px/2 + gap) */
    animation: orbitSatellite 5s linear infinite;
    pointer-events: none;
}

/* Orbit satellite: mặc định paused, chỉ chạy khi active + không hover */
.planet-nav-item .planet-dot::after {
    animation-play-state: paused;
}

.planet-nav-item.active .planet-dot::after {
    animation-play-state: running;
}

/* Pause khi user hover vào section */
.aeth-spotlight-inner:hover .planet-nav-item.active .planet-dot::after {
    animation-play-state: paused;
}

@keyframes orbitSatellite {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(17px) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(17px) rotate(-360deg);
    }
}

/* Glow colors theo hành tinh — hover */
.planet-nav-item:hover .planet-dot-moon {
    box-shadow: 0 0 14px 4px rgba(148, 163, 184, 0.6);
}

.planet-nav-item:hover .planet-dot-venus {
    box-shadow: 0 0 14px 4px rgba(253, 230, 138, 0.6);
}

.planet-nav-item:hover .planet-dot-mars {
    box-shadow: 0 0 14px 4px rgba(252, 165, 165, 0.6);
}

.planet-dot-moon {
    background: radial-gradient(circle at 35% 35%, #e2e8f0, #64748b);
}

.planet-dot-venus {
    background: radial-gradient(circle at 35% 35%, #fde68a, #d97706);
}

.planet-dot-mars {
    background: radial-gradient(circle at 35% 35%, #fca5a5, #dc2626);
}

.planet-nav-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    /* Fix: tăng từ 9px — cải thiện readability */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    /* Fix #3b: contrast 6.2:1 — WCAG AA ✅ */
    font-weight: 700;
    transition: opacity 0.3s, text-shadow 0.3s;
}

/* Focus-visible cho CTA button */
.aeth-btn-spotlight:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.aeth-btn-spotlight:active {
    transform: scale(0.97);
}

/* --- Responsive --- */
@media(max-width:767px) {
    .aeth-spotlight {
        padding: var(--aeth-gap-lg) 1rem;
    }

    .aeth-spotlight-inner {
        min-height: 560px;
        border-radius: 0; /* Bỏ bo góc trên mobile */
    }

    .spotlight-content {
        min-height: 560px;
        padding: 2.5rem 1.5rem 6rem;
        /* padding-bottom 6rem: chừa đáy cho planet-nav, tránh nút đè lên */
        align-items: stretch;
        /* variant-content cao hết khung → căn được trên/giữa/dưới */
    }

    /* Text dồn lên đỉnh khung */
    .variant-content.active {
        justify-content: flex-start;
    }

    /* Hình sản phẩm to hơn; cùng nút tạo thành 1 cụm căn giữa khoảng trống */
    .aeth-bottle-mobile {
        width: 15rem;
        margin-top: auto;
        margin-bottom: 1.25rem;
        /* khoảng cách nhỏ giữa hình và nút */
    }

    /* Nút đẩy phần trống còn lại xuống dưới → cụm (hình + nút) căn giữa, không chạm planet-nav */
    .aeth-btn-spotlight {
        margin-bottom: auto;
    }

    /* Planet mobile — giảm kích thước */
    .planet.foreground {
        width: 700px;
        height: 700px;
        margin-left: -350px;
        bottom: -460px;
    }

    .planet.background {
        width: 120px;
        height: 120px;
        margin-left: -60px;
        bottom: 45%;
    }

    /* Nav: chuyển xuống dưới, horizontal */
    .planet-nav {
        flex-direction: row;
        right: auto;
        top: auto;
        bottom: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
        gap: 1.5rem;
    }
}

/* === BEST SELLERS === */
.aeth-bestsellers {
    padding: var(--aeth-gap-lg) 0;
    background: #f5f5f7;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
    overflow: hidden;
    /* Fix #1: ngăn horizontal scroll từ mega typography */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.aeth-bestsellers-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.aeth-bestsellers-header {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    /* chữ hiển thị trọn 100%, có khoảng cách với product grid (bỏ overlap) */
}

/* Dòng trên: label nhỏ + View All */
.aeth-bs-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
}

.aeth-bs-label {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #000;
}

/* Chữ cực lớn — overlap xuống product grid */
.aeth-bs-heading {
    display: block;
    font-size: 10rem;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: clamp(5px, 2vw, 20px);
    /* Fix #1: responsive letter-spacing — tránh overflow trên mobile */
    color: #000;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    pointer-events: none;
    /* cho phép click vào sản phẩm phía dưới */
}

.aeth-bestsellers-header a {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #000;
    padding-bottom: 0.25rem;
    text-decoration: none;
    color: #000;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.aeth-bestsellers-header a:hover {
    opacity: 0.6;
}

.aeth-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 2;
    /* sản phẩm nằm ĐÈ LÊN chữ heading */
}

/* Mobile: chuyển grid → flex horizontal scroll (swipe carousel) */
@media(max-width:767px) {
    .aeth-products-grid {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .aeth-products-grid::-webkit-scrollbar {
        display: none;
    }

    .aeth-products-grid .aeth-product {
        flex: 0 0 calc(50% - 0.75rem);
        min-width: calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
        scroll-snap-align: start;
    }
}

@media(min-width:768px) {
    .aeth-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.aeth-product {
    cursor: pointer;
}

.aeth-product a {
    text-decoration: none;
    color: inherit;
}

.aeth-product-img {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 0; /* Bỏ bo góc */
    margin-bottom: 1rem;
    background: #fff;
}

.aeth-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.aeth-product:hover .aeth-product-img img {
    transform: scale(1.05);
}

.aeth-product h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    /* Giới hạn tối đa 2 dòng, phần thừa cắt bằng dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aeth-product .aeth-price {
    color: #71717a;
    font-size: 14px;
    margin-top: 0.5rem;
    font-weight: 600;
}

/* === TRUST SIGNALS === */
.aeth-trust {
    padding: var(--aeth-gap-md) 0;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.aeth-trust-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.aeth-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--aeth-gap-2xs);
}

.aeth-trust-item svg {
    color: #18181b;
    margin-bottom: var(--aeth-gap-2xs);
}

.aeth-trust-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #18181b;
}

.aeth-trust-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: #71717a;
    letter-spacing: 0.02em;
}

@media(max-width:767px) {
    .aeth-trust-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 1.5rem;
    }

    .aeth-trust-label {
        font-size: 0.7rem;
    }
}

/* === SPLIT SECTIONS === */
.aeth-split {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: #fff;
    margin: 0 0 var(--aeth-gap-lg);
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

@media(min-width:768px) {
    .aeth-split {
        flex-direction: row;
        min-height: 480px;
    }
}

/* --- Split Typo variant — typography lớn nằm sau sản phẩm --- */
.aeth-split--typo {
    position: relative;
    padding-top: 13.75rem;
    /* khớp chiều cao header với heading 10rem cố định: chữ hiển thị TRỌN 100% + khoảng cách với sản phẩm */
    overflow: visible;
    /* override overflow:hidden để chữ không bị cắt */
}

/* Typography header — absolute, nằm SAU cả khung trái + phải */
.aeth-split-typo-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    /* nằm SAU sản phẩm */
    pointer-events: none;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0;
}

.aeth-split-typo-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #000;
    margin-bottom: 8px;
}

/* Chữ cực lớn — nằm phía sau, tràn tự nhiên theo độ dài text */
.aeth-split-typo-heading {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10rem;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: clamp(5px, 2vw, 20px);
    /* Fix #1: responsive letter-spacing — tránh overflow trên mobile */
    color: #000;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    /* giữ trên 1 dòng, chữ ngắn chỉ nằm dưới trái, chữ dài tràn qua phải */
}

/* Left + Right nằm ĐÈ LÊN chữ heading */
.aeth-split--typo .aeth-split-left,
.aeth-split--typo .aeth-split-right {
    position: relative;
    z-index: 2;
}

.aeth-split-left {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

@media(min-width:768px) {
    .aeth-split-left {
        width: 42%;
        height: auto;
        border-radius: 0; /* Bỏ bo góc */
        margin-left: 3rem;
    }
}

.aeth-split-left .overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
}

.aeth-split-left>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === YouTube Video trong Split 3 === */
.aeth-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.aeth-video-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    /* Chặn click vào video — chỉ cho click nút mute */
}

/* Nút bật/tắt tiếng — góc dưới phải */
.aeth-mute-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, border-color 0.3s;
    padding: 0;
}

.aeth-mute-toggle:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: #fff;
}

.aeth-mute-toggle svg {
    width: 18px;
    height: 18px;
}

/* Mute icon: mặc định hiện icon-muted, ẩn icon-unmuted */
.aeth-mute-toggle .icon-unmuted {
    display: none;
}

.aeth-split-left-content {
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    color: #fff;
    text-align: center;
}



.aeth-split-left-content .tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 500;
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

.aeth-split-left-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 0.75rem;
}

.aeth-split-left-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 22rem;
    margin: 0 auto 1.2rem;
    opacity: 0.85;
}

.aeth-btn-outline {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    border: 1px solid #fff;
    padding: 0.6rem 1.6rem;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: #fff;
    background: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.aeth-btn-outline:hover {
    background: #fff;
    color: #000;
}

.aeth-split-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    position: relative;
}

@media(min-width:768px) {
    .aeth-split-right {
        width: 58%;
        padding: 2rem 3rem;
    }
}

.aeth-split-products {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.aeth-split-products::-webkit-scrollbar {
    display: none;
}

.aeth-split-product {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
    scroll-snap-align: start;
    cursor: pointer;
}

.aeth-split-product a {
    text-decoration: none;
    color: inherit;
}

.aeth-split-product-img {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 0; /* Bỏ bo góc */
}

.aeth-split-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.aeth-split-product:hover .aeth-split-product-img img {
    transform: scale(1.05);
}

.aeth-split-product h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    margin-top: 0.75rem;
    color: #000;
    line-height: 1.3;
    /* Giới hạn tối đa 2 dòng, phần thừa cắt bằng dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aeth-split-product .price {
    color: #71717a;
    font-size: 14px;
    margin: 0.3rem 0 0.6rem;
    font-weight: 600;
}

.aeth-btn-add {
    font-family: 'Inter', sans-serif;
    width: 100%;
    border: 1px solid #000;
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: none;
    cursor: pointer;
    transition: all 0.3s;
    color: #000;
    border-radius: 2px;
}

.aeth-btn-add:hover {
    background: #000;
    color: #fff;
}

/* Dot navigation cho split carousel */
.aeth-split-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.aeth-split-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d4d4d8;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s, border-radius 0.3s;
    /* Fix #6b: list properties — không dùng transition: all */
    /* Fix #2: tăng touch target lên 44×44px bằng pseudo element */
    position: relative;
}

/* Fix #2: Invisible tap area 44×44px — đạt WCAG 2.5.8 + Mobile best practice */
.aeth-split-dots button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.aeth-split-dots button.active {
    background: #000;
    width: 24px;
    border-radius: 4px;
}

@media(max-width:767px) {
    .aeth-split-product {
        flex: 0 0 calc(50% - 0.75rem);
        min-width: calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
}

/* === BANNER + CAROUSEL (Split 2) === */
.aeth-banner-carousel {
    width: 100%;
    margin: 0 0 var(--aeth-gap-lg);
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* Typo variant cho banner-carousel */
.aeth-bc--typo {
    position: relative;
    padding-top: 13.75rem;
    /* giống split--typo: khớp heading 10rem cố định */
    overflow: visible;
}

/* Banner + Products nằm ĐÈ LÊN chữ heading */
.aeth-bc--typo .aeth-bc-banner,
.aeth-bc--typo .aeth-bc-products-wrap {
    position: relative;
    z-index: 2;
}

/* Banner — ảnh hiển thị tự nhiên, không zoom/crop cố định */
.aeth-bc-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0; /* Bỏ bo góc */
}

.aeth-bc-banner>img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.aeth-bc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.aeth-bc-content {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: #fff;
}

.aeth-bc-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 500;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.aeth-bc-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1rem;
}

.aeth-bc-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    max-width: 32rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* Carousel sản phẩm */
.aeth-bc-products-wrap {
    width: 100%;
    background: #f5f5f7;
    padding: 2rem calc((100% - 1536px) / 2 + 2rem);
}

.aeth-bc-products {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.aeth-bc-products::-webkit-scrollbar {
    display: none;
}

.aeth-bc-product {
    flex: 0 0 calc(25% - 1.125rem);
    min-width: calc(25% - 1.125rem);
    max-width: calc(25% - 1.125rem);
    scroll-snap-align: start;
    cursor: pointer;
}

.aeth-bc-product-img {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 0; /* Bỏ bo góc */
    margin-bottom: 1rem;
}

.aeth-bc-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.aeth-bc-product:hover .aeth-bc-product-img img {
    transform: scale(1.05);
}

.aeth-bc-product h4 {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
    color: #000;
    line-height: 1.3;
    /* Giới hạn tối đa 2 dòng, phần thừa cắt bằng dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aeth-bc-product .price {
    color: #71717a;
    font-size: 14px;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
}

@media(max-width:1023px) {
    .aeth-bc-product {
        flex: 0 0 calc(33.333% - 1rem);
        min-width: calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

@media(max-width:767px) {
    /* aeth-bc-banner: height tự nhiên theo ảnh — không cần override */

    .aeth-bc-product {
        flex: 0 0 calc(50% - 0.75rem);
        min-width: calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
}

/* === MARQUEE BREAK — Premium auto-scroll === */
/* Design principle: nền trắng đồng nhất với color flow toàn trang,
   premium feel đạt qua typography treatment, không dùng background contrast */
.aeth-marquee {
    width: 100%;
    overflow: hidden;
    padding: clamp(0.75rem, 1.5vw, 1.25rem) 0;
    background: #000000; /* Nền đen */
}

.aeth-marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: aethMarquee 30s linear infinite;
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
}

/* Pause on hover — desktop micro-interaction */
.aeth-marquee:hover .aeth-marquee-track {
    animation-play-state: paused;
}

/* Text items — outlined stroke đen mờ trên nền trắng */
.aeth-mq-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff; /* Chữ trắng */
    -webkit-text-stroke: none; /* Bỏ viền chữ */
    padding: 0 clamp(1rem, 2vw, 2rem);
    flex-shrink: 0;
    transition: color 0.4s ease;
}

/* Hover: giảm nhẹ độ sáng chữ */
.aeth-marquee:hover .aeth-mq-text {
    color: rgba(255, 255, 255, 0.85);
}

/* Separator — SVG diamond */
.aeth-mq-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(0.5rem, 1vw, 1rem);
    color: rgba(255, 255, 255, 0.3); /* Phân cách trắng mờ */
    flex-shrink: 0;
}

.aeth-mq-sep svg {
    width: clamp(6px, 0.8vw, 10px);
    height: clamp(6px, 0.8vw, 10px);
}

/* Backward compat — giữ class cũ nếu chưa update HTML */
.aeth-marquee-track span:not(.aeth-mq-text):not(.aeth-mq-sep) {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff; /* Chữ trắng */
    -webkit-text-stroke: none; /* Bỏ viền chữ */
    padding: 0 1rem;
    flex-shrink: 0;
}

@keyframes aethMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Dịch đúng 50% vì nội dung gồm 2 nửa giống nhau */
        transform: translateX(-50%);
    }
}

/* === INSTAGRAM FEED — 2 hàng auto-scroll + typo overlap === */
.aeth-ig {
    width: 100%;
    position: relative;
    padding-top: clamp(9rem, 5.5rem + 8.5vw, 15.75rem);
    overflow: visible;
}

/* Typography header — BASE (thuộc tính dùng chung cho cả PC & Mobile) */
.aeth-ig-typo-header {
    width: 100%;
    pointer-events: none;
}

.aeth-ig-typo-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
}

.aeth-ig-typo-heading {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* Typography header — PC (≥768px) */
@media(min-width:768px) {
    .aeth-ig-typo-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
        padding: 1.5rem 2rem 0;
    }

    .aeth-ig-typo-label {
        font-size: 20px;
        letter-spacing: 0.15em;
        margin-bottom: 8px;
    }

    .aeth-ig-typo-heading {
        font-size: clamp(4rem, 10vw, 12rem);
        line-height: 0.85;
        /* đồng bộ với .aeth-bs-heading / .aeth-split-typo-heading — hộp chữ gọn, không tràn xuống vùng ảnh */
        letter-spacing: 20px;
    }
}

/* Follow link — góc trên phải, z-index cao hơn typo */
.aeth-ig-follow {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 3;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #71717a;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s;
}

.aeth-ig-follow:hover {
    color: #000;
}

.aeth-ig-follow svg {
    transition: transform 0.3s;
}

.aeth-ig-follow:hover svg {
    transform: translate(2px, -2px);
}

/* Hàng chứa track — z-index cao hơn typo để ĐÈ LÊN chữ */
.aeth-ig-row {
    overflow: hidden;
    padding: 5px 0;
    position: relative;
    z-index: 2;
}

/* Track — flex ngang, JS clone nội dung cho loop */
.aeth-ig-track {
    display: flex;
    gap: 10px;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    flex-shrink: 0;
}

/* Hàng 1: Phải → Trái */
.aeth-ig-row--rtl .aeth-ig-track {
    animation: ig-scroll-rtl 40s linear infinite;
}

/* Hàng 2: Trái → Phải */
.aeth-ig-row--ltr .aeth-ig-track {
    animation: ig-scroll-ltr 40s linear infinite;
}

/* Pause khi hover — user xem rõ ảnh */
.aeth-ig-row:hover .aeth-ig-track {
    animation-play-state: paused;
}

/* Mỗi item ảnh — vuông 1:1 */
.aeth-ig-item {
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 0; /* Bỏ bo góc */
    display: block;
}

.aeth-ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aeth-ig-item:hover img {
    transform: scale(1.08);
}

/* Overlay — hiện icon IG khi hover */
.aeth-ig-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s;
}

.aeth-ig-item:hover .aeth-ig-overlay {
    opacity: 1;
}

.aeth-ig-overlay svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

@keyframes ig-scroll-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes ig-scroll-ltr {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* === PARTNERS === */
.aeth-partners {
    padding: var(--aeth-gap-md) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}

.aeth-partners-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    opacity: 0.35;
    filter: grayscale(1);
}

.aeth-partners-inner span {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* === REVIEWS — Carousel Cards === */
.aeth-reviews {
    padding: var(--aeth-gap-lg) 2rem;
    max-width: 1400px;
    margin: 0 auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
    background: #fafafa;
}

/* Typo overlap variant — chữ lớn nằm sau review cards */
.aeth-reviews--typo {
    position: relative;
    padding-top: clamp(9rem, 5.5rem + 8.5vw, 15.75rem);
    overflow: visible;
    max-width: none;
    /* full-width cho typo header */
}

/* Carousel + dots nằm ĐÈ LÊN chữ heading */
.aeth-reviews--typo .aeth-reviews-carousel,
.aeth-reviews--typo .aeth-split-dots {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Carousel container — 1 hàng ngang, cuộn mượt */
.aeth-reviews-carousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 0.5rem;
}

.aeth-reviews-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Mỗi card — chiều rộng cố định theo viewport */
.aeth-review-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    /* Desktop: 3 cards visible */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.3s ease;
}

.aeth-review-card:hover {
    border-color: rgba(0, 0, 0, 0.18);
}

/* Stars — inline SVG */
.aeth-review-stars {
    display: flex;
    gap: 2px;
}

.aeth-review-stars svg {
    flex-shrink: 0;
}

/* Nội dung đánh giá */
.aeth-review-text {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    line-height: 1.65;
    color: #52525b;
    margin: 0;
    font-size: 0.875rem;
    flex: 1;
    /* Đẩy author xuống cuối card */
}

/* Sản phẩm đã mua */
.aeth-review-product {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a1a1aa;
}

.aeth-review-product::before {
    content: '— ';
}

/* Author row — avatar + meta */
.aeth-review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    /* Luôn nằm cuối card */
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Letter avatar — circle, gradient background */
.aeth-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
    background: linear-gradient(135deg, #3f3f46 0%, #18181b 100%);
}

/* Tạo gradient khác nhau cho mỗi avatar dựa trên vị trí */
.aeth-review-card:nth-child(2n) .aeth-review-avatar {
    background: linear-gradient(135deg, #71717a 0%, #3f3f46 100%);
}

.aeth-review-card:nth-child(3n) .aeth-review-avatar {
    background: linear-gradient(135deg, #52525b 0%, #27272a 100%);
}

/* Meta — tên + verified badge */
.aeth-review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aeth-review-meta cite {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 0.8rem;
    font-style: normal;
    color: #18181b;
}

/* Verified badge */
.aeth-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: #22c55e;
    letter-spacing: 0.02em;
}

.aeth-review-verified svg {
    flex-shrink: 0;
}

/* === NEWSLETTER === */
.aeth-newsletter {
    padding: var(--aeth-gap-lg) 2rem;
    background: #000;
    color: #fff;
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

.aeth-newsletter-inner {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.aeth-newsletter h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.aeth-newsletter p {
    font-family: 'Inter', sans-serif;
    color: #a1a1aa;
    /* Fix #4: contrast 5.4:1 trên nền #000 — WCAG AA ✅ (trước: #71717a = 4.2:1 ❌) */
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}

.aeth-newsletter form {
    position: relative;
}

.aeth-newsletter input[type="email"] {
    font-family: 'Inter', sans-serif;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #27272a;
    color: #fff;
    padding: 0.85rem 0.5rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    outline: none;
}

/* Fix #5: focus-visible cho newsletter input */
.aeth-newsletter input[type="email"]:focus-visible {
    border-color: #fff;
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
}

.aeth-newsletter input[type="email"]::placeholder {
    color: #71717a;
    /* Fix #4: contrast 4.5:1 trên nền #000 — WCAG AA ✅ (trước: #3f3f46 = 2.5:1 ❌) */
}

.aeth-newsletter input[type="email"]:focus {
    border-color: #fff;
}

.aeth-newsletter form button[type="submit"] {
    font-family: 'Inter', sans-serif;
    position: absolute;
    right: 0;
    bottom: 0.85rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 900;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}


/* === FOOTER === */
.aeth-footer {
    width: 100%;
    padding: 3.5rem 2.5rem 0;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.aeth-footer-brand-full {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    white-space: nowrap;
    margin: 0 -2.5rem;
    padding-bottom: 2rem;
    overflow: hidden;
    font-size: 15vw;
}



/* === Footer grid 3 cột === */
.aeth-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 0 auto;
}

@media(min-width:768px) {
    .aeth-footer-inner {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.aeth-footer p {
    color: rgba(255, 255, 255, 0.6);
    max-width: 65rem;
    line-height: 1.6;
    font-size: 15px;
}

.aeth-footer h4 {
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: #fff;
}

.aeth-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aeth-footer ul a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: color 0.3s;
}

.aeth-footer ul a:hover {
    color: #fff;
}

/* === Footer Bottom Bar — BCT | Payment | Social (căn thẳng 3 cột) === */
.aeth-footer-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0 0;
}

/* Logo BCT */
.aeth-footer-bct {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.aeth-footer-bct img {
    height: 44px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.aeth-footer-bct:hover img {
    opacity: 1;
}

/* Payment Icons */
.aeth-footer-payment-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-self: start;
}

.aeth-footer-payment-icons img,
.aeth-footer-payment-icons svg {
    height: 24px;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.aeth-footer-payment-icons img:hover,
.aeth-footer-payment-icons svg:hover {
    opacity: 1;
}

/* Social Icons */
.aeth-footer-social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.aeth-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.aeth-footer-social a:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

/* === Copyright === */
.aeth-footer-copyright {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* BCT mobile — ẩn desktop, hiện mobile */
.aeth-footer-bct-mobile {
    display: none;
}

/* === Mobile Footer Override === */
@media(max-width:767px) {
    .aeth-footer {
        padding: 2.5rem 1.5rem 0;
    }

    .aeth-footer-brand-full {
        margin: 0 -1.5rem;
    }

    /* Navigate + Support = 2 cột cạnh nhau */
    .aeth-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .aeth-footer-col-brand {
        grid-column: 1 / -1;
    }

    /* Hiện BCT mobile trong cột brand */
    .aeth-footer-bct-mobile {
        display: inline-block;
        margin-top: 1.5rem;
    }

    .aeth-footer-bct-mobile img {
        height: 44px;
        width: auto;
        opacity: 0.7;
    }

    /* Ẩn BCT trong footer-bottom trên mobile */
    .aeth-footer-bct-wrap {
        display: none;
    }

    /* Footer bottom: 2 cột — payment trái | social phải */
    .aeth-footer-bottom {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }
}

/* === HAMBURGER BUTTON — ẩn desktop, hiện mobile === */
.aeth-hamburger {
    display: none;
    /* ẩn trên desktop */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.aeth-hamburger-line {
    display: block;
    width: 20px;
    height: 1.5px;
    background: #3f3f46;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 3 gạch cách nhau 5px */
.aeth-hamburger-line+.aeth-hamburger-line {
    margin-top: 5px;
}

/* === MOBILE MENU — pill ngang thay thế nav (phong cách seed.com) === */

/* Ẩn mặc định */
.aeth-mobile-menu {
    display: none;
}

/* Khi mở menu: pill ngang chứa links */
.aeth-nav.menu-open .aeth-mobile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    background: rgba(87, 94, 85, 0.4);
    backdrop-filter: blur(38px);
    -webkit-backdrop-filter: blur(38px);
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0 0.4rem;
    height: 40px;
}

/* Ẩn hamburger/logo/icons khi menu mở */
.aeth-nav.menu-open .aeth-hamburger,
.aeth-nav.menu-open .aeth-logo,
.aeth-nav.menu-open .aeth-nav-actions {
    display: none !important;
}

/* Chấm tròn logo — mặc định đen */
.aeth-mobile-menu-dot {
    color: #3f3f46;
    font-size: 10px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
}

/* Scroll: dot đổi trắng */
.aeth-nav.scrolled .aeth-mobile-menu-dot {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Menu links — mặc định chữ ĐEN khi ở đầu trang */
.aeth-mobile-menu a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #3f3f46;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.4rem 0.6rem;
    border-radius: 50px;
    transition: color 0.2s ease, background 0.2s ease;
    flex: 1;
    text-align: center;
}

.aeth-mobile-menu a:hover,
.aeth-mobile-menu a.active {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
}

/* Scroll: chữ đổi TRẮNG khi nền tối */
.aeth-nav.scrolled .aeth-mobile-menu a {
    color: rgba(255, 255, 255, 0.8);
}

.aeth-nav.scrolled .aeth-mobile-menu a:hover,
.aeth-nav.scrolled .aeth-mobile-menu a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Nút đóng × — mặc định đen */
.aeth-mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #3f3f46;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}

.aeth-mobile-menu-close:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
}

/* Scroll: nút đóng đổi trắng */
.aeth-nav.scrolled .aeth-mobile-menu-close {
    color: rgba(255, 255, 255, 0.7);
}

.aeth-nav.scrolled .aeth-mobile-menu-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* === MOBILE === */
@media(max-width:767px) {

    /* Nav links desktop — ẩn, thay bằng mobile-menu pill */
    .aeth-nav-links {
        display: none;
    }

    /* Pill height gọn hơn trên mobile: 48px → 40px */
    .aeth-logo,
    .aeth-nav-actions {
        height: 40px;
        padding: 0.3rem 1rem;
    }

    /* Hiện hamburger trên mobile — căn giữa 2 gạch */
    .aeth-hamburger {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        justify-self: start;
    }

    /* Mobile nav layout: hamburger | logo (giữa) | icons */
    .aeth-nav-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 0.6rem 1rem;
    }

    /* Khi menu mở: bỏ grid, dùng flex để mobile-menu chiếm toàn bộ */
    .aeth-nav.menu-open .aeth-nav-inner {
        display: flex;
        padding: 0.6rem 1rem;
    }

    /* Logo căn giữa chính xác */
    .aeth-logo {
        justify-self: center;
    }

    .aeth-logo img {
        height: 30px;
    }

    /* Icons nằm bên phải */
    .aeth-nav-actions {
        justify-self: end;
        gap: 0;
    }

    .aeth-hero {
        height: 70vh;
    }

    .aeth-hero h1,
    .aeth-hero-title {
        font-size: 2.2rem;
    }

    .aeth-hero-arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .aeth-hero-prev { left: 10px; }
    .aeth-hero-next { right: 10px; }
    .aeth-hero-dots { bottom: 14px; }

    .aeth-bestsellers-header {
        margin-bottom: 1rem;
        /* mobile: chữ hiển thị trọn, không đè lên sản phẩm */
    }

    .aeth-bs-label,
    .aeth-split-typo-label {
        font-size: 15px;
    }

    .aeth-bestsellers-header a {
        font-size: 10px;
    }

    .aeth-bs-heading {
        font-size: 4rem;
        letter-spacing: 15px;
    }

    /* --- Split 1 & 3: typo header hiển thị TRỌN phía trên sản phẩm ---
       Order: 1=ảnh/video, 2=typo header, 3=sản phẩm (cách dưới chữ, không đè) */
    .aeth-split--typo {
        padding-top: 0;
    }

    .aeth-split--typo .aeth-split-typo-header {
        position: relative;
        order: 2;
        z-index: 1;
        margin-bottom: 0.75rem;
        padding: 1rem 2.5rem 0;
        pointer-events: none;
    }

    .aeth-split--typo .aeth-split-left {
        order: 1;
    }

    .aeth-split--typo .aeth-split-right {
        order: 3;
        position: relative;
        z-index: 2;
        padding-top: 0;
        background: transparent;
    }

    /* Split 1 (trước Marquee): giữ spacing nhỏ thay vì dính sát */
    .aeth-split--typo:has(+ .aeth-marquee) {
        margin-bottom: var(--aeth-gap-sm);
    }

    /* Marquee — mobile adaptive: font nhỏ hơn, compact spacing */
    .aeth-mq-text {
        font-size: clamp(1.6rem, 6vw, 2.5rem);
        letter-spacing: 0.05em;
        padding: 0 0.75rem;
    }

    .aeth-mq-sep {
        padding: 0 0.4rem;
    }

    /* --- Split 2: typo header hiển thị TRỌN phía trên carousel ---
       1 = banner, 2 = typo header, 3 = carousel (cách dưới chữ, không đè) */
    .aeth-bc--typo {
        display: flex;
        flex-direction: column;
        padding-top: 0;
    }

    .aeth-bc--typo .aeth-split-typo-header {
        position: relative;
        order: 2;
        z-index: 1;
        margin-bottom: 0.75rem;
        padding: 1rem 2.5rem 0;
        pointer-events: none;
    }

    .aeth-bc--typo .aeth-bc-banner {
        order: 1;
    }

    .aeth-bc--typo .aeth-bc-products-wrap {
        order: 3;
        position: relative;
        z-index: 2;
    }

    .aeth-bc-products-wrap {
        padding: 0 2.5rem 2rem;
        background: transparent;
    }

    .aeth-split-typo-heading {
        font-size: 4rem;
        letter-spacing: 15px;
        /* Fix #1: explicit mobile override — tránh overflow */
    }

    .aeth-reviews {
        padding: var(--aeth-gap-lg) 0;
    }

    /* Reviews typo — mobile: relative, compact overlap */
    .aeth-reviews--typo {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Typo header — mobile compact */
    .aeth-reviews--typo .aeth-ig-typo-header {
        position: relative;
        z-index: 1;
        margin-bottom: 0.75rem;
        padding: 0.75rem 1.5rem 0;
    }

    /* Carousel — full-width cards, 1 per view */
    .aeth-reviews--typo .aeth-reviews-carousel {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        gap: 1rem;
    }

    .aeth-reviews--typo .aeth-split-dots {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Mobile: 1 card full-width per swipe — dễ đọc, sang trọng */
    .aeth-review-card {
        flex: 0 0 calc(100% - 1rem);
        min-width: calc(100% - 1rem);
        padding: 1.5rem;
    }

    .aeth-review-text {
        font-size: 0.875rem;
        line-height: 1.7;
    }

    /* Avatar nhỏ hơn trên mobile */
    .aeth-review-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .aeth-review-author {
        padding-top: 0.75rem;
        gap: 0.5rem;
    }

    .aeth-review-meta cite {
        font-size: 0.75rem;
    }

    .aeth-newsletter {
        padding: var(--aeth-gap-lg) 1.5rem;
    }

    /* --- Instagram Feed mobile --- */
    .aeth-ig {
        padding-top: 0;
    }

    /* Typography header — MOBILE (<768px) */
    .aeth-ig-typo-header {
        position: relative;
        z-index: 1;
        margin-bottom: 0.75rem;
        padding: 1rem 2.5rem 0;
    }

    .aeth-ig-typo-label {
        font-size: 15px;
        letter-spacing: 0.12em;
        margin-bottom: 6px;
    }

    .aeth-ig-typo-heading {
        font-size: clamp(2.5rem, 10vw, 4rem);
        /* Fix #1: responsive trên mọi mobile */
        line-height: 0.85;
        /* 0.85 thay vì 0.65 — chữ không tràn ra ngoài hộp, hiển thị trọn */
        letter-spacing: 15px;
        /* Đồng bộ 15px với sellers, care, mist, perfume */
    }

    .aeth-ig-follow {
        position: relative;
        top: auto;
        right: auto;
        padding: 0 2.5rem;
        margin-bottom: 0.5rem;
    }

    .aeth-ig-item {
        width: 160px;
        height: 160px;
    }
}

/* =============================================================
   COLLECTION AETHERIS — Inspired by Seed.com/products
   3 sections: Hero Banner → Featured Product → Product Grid
   ============================================================= */

/* --- Wrapper --- */
.aeth-collection {
    background: #f5f5f7;
    /* Bỏ padding-top: 80px để banner đẩy sát mép trên, menu đè lên trên */
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* =============================================================
   SECTION 1: HERO BANNER — Full-width, bo tròn, text overlay
   ============================================================= */
.aeth-coll-hero {
    position: relative;
    width: 100%;
    /* Giảm height lại gọn gàng hơn */
    height: clamp(280px, 35vw, 450px);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 450px;
}

/* <picture> bọc ảnh hero phải lấp đầy section để img height:100% có gốc tham chiếu */
.aeth-coll-hero-pic {
    display: block;
    width: 100%;
    height: 100%;
}

.aeth-coll-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Bỏ bo góc */
    display: block;
}

/* Gradient overlay — text đọc rõ trên mọi ảnh */
.aeth-coll-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0; /* Bỏ bo góc */
    display: flex;
    align-items: flex-end;
    /* Tăng padding để nội dung thụt vào giống như nằm trong container */
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}

.aeth-coll-hero-content {
    /* Ẩn hiển thị nhưng vẫn giữ cho Bot Google và Screen Readers đọc được (SEO) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.aeth-coll-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.aeth-coll-hero-desc {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

/* =============================================================
   SECTION 2: FEATURED PRODUCT — wrapper + lifestyle
   ============================================================= */
.aeth-coll-featured-wrapper {
    width: 100%;
    background: #fff;
    padding: var(--aeth-gap-lg, 4rem) 0;
}

.aeth-coll-featured {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    /* Wrapper chính chiếm ~75%, lifestyle chiếm ~25% */
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    min-height: 480px;
}

/* --- Wrapper chính: Product + Info — bo 4 góc, nền trắng --- */
.aeth-coll-featured-main {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0;
    /* Background trắng cho khối sản phẩm và thông tin */
    background: #fff;
    border-radius: 0; /* Bỏ bo góc */
    overflow: hidden;
}

/* --- Cột trái: Ảnh sản phẩm --- */
.aeth-coll-featured-product {
    /* Fix #2: bỏ nền đen, bỏ padding — ảnh fill toàn bộ khung */
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

.aeth-coll-featured-product a {
    display: block;
    width: 100%;
    height: 100%;
}

.aeth-coll-featured-product-img {
    /* Fix #2: bỏ aspect-ratio cố định, cho ảnh fill */
    width: 100%;
    height: 100%;
}

.aeth-coll-featured-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.aeth-coll-featured-product:hover img {
    transform: scale(1.05);
}

/* --- Cột phải: Info --- */
.aeth-coll-featured-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    background: #f0f0f2;
}

.aeth-coll-featured-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #18181b;
    border: 1.5px solid #18181b;
    border-radius: 100px;
    padding: 4px 14px;
    margin-bottom: 1.25rem;
    width: fit-content;
}

.aeth-coll-featured-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.aeth-coll-featured-title a {
    text-decoration: none;
    color: #18181b;
    transition: opacity 0.3s;
}

.aeth-coll-featured-title a:hover {
    opacity: 0.7;
}

.aeth-coll-featured-desc {
    font-size: 0.9rem;
    color: #52525b;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.aeth-coll-featured-price {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #18181b;
    margin: 0 0 1.5rem;
}

.aeth-coll-featured-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* --- Cột phải: Ảnh lifestyle --- */
.aeth-coll-featured-lifestyle {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aeth-coll-featured-lifestyle-img {
    flex: 1;
    border-radius: 0; /* Bỏ bo góc */
    overflow: hidden;
}

.aeth-coll-featured-lifestyle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.aeth-coll-featured-lifestyle:hover img {
    transform: scale(1.03);
}

.aeth-coll-featured-caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #52525b;
    line-height: 1.5;
    padding: 0 0.5rem;
    margin: 0;
}

/* =============================================================
   CTA BUTTONS — Collection
   ============================================================= */

/* Primary: pill button xanh đậm (giống Seed) */
.aeth-btn-coll-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #fff;
    background: #18181b;
    border: none;
    border-radius: 100px;
    padding: 14px 32px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aeth-btn-coll-primary:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.aeth-btn-coll-primary:active {
    transform: scale(0.97);
}

/* Small variant cho grid cards */
.aeth-btn-coll-sm {
    font-size: 12px;
    padding: 10px 22px;
}

/* Secondary: text link underline */
.aeth-btn-coll-secondary {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #18181b;
    background: none;
    border: none;
    border-bottom: 1px solid #18181b;
    padding: 0 0 2px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.aeth-btn-coll-secondary:hover {
    opacity: 0.6;
}

/* =============================================================
   SECTION 3: PRODUCT GRID — 2 cột, card ngang
   ============================================================= */

/* Wrapper cho section lưới: Nền xám tiệp với trang, bo góc trên và chồng lên khối trắng */
.aeth-coll-grid-wrapper {
    width: 100%;
    background: #f5f5f7;
    border-radius: 2.5rem 2.5rem 0 0;
    margin-top: -2.5rem;
    position: relative;
    z-index: 2;
    padding-top: 1rem;
}

.aeth-coll-grid-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem var(--aeth-gap-lg, 4rem);
    position: relative;
    overflow: hidden;
}

/* Typography Header — overlap pattern */
.aeth-coll-typo-header {
    margin-bottom: -2rem;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.aeth-coll-typo-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #000;
    margin-bottom: 8px;
}

.aeth-coll-typo-heading {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(4rem, 10vw, 10rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: clamp(5px, 2vw, 20px);
    color: rgba(0, 0, 0, 0.06);
    text-transform: uppercase;
}

/* Grid: luôn 2 cột */
.aeth-coll-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Card ngang: ảnh trái + info phải */
.aeth-coll-card {
    background: #fff;
    border-radius: 0; /* Bỏ bo góc */
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Fade-in staggered animation */
    opacity: 0;
    animation: aethCollCardIn 0.5s ease forwards;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

@keyframes aethCollCardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aeth-coll-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Ảnh trái (~40%) */
.aeth-coll-card-img-link {
    flex: 0 0 40%;
    max-width: 40%;
    text-decoration: none;
}

.aeth-coll-card-img {
    background: linear-gradient(145deg, #f0f0f2 0%, #e8e8ec 100%);
    height: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Fix #4: ảnh card fill toàn bộ khung */
.aeth-coll-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.aeth-coll-card:hover .aeth-coll-card-img img {
    transform: scale(1.05);
}

/* Info phải (~60%) */
.aeth-coll-card-info {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aeth-coll-card-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #18181b;
    border: 1px solid rgba(24, 24, 27, 0.3);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.aeth-coll-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.aeth-coll-card-title a {
    text-decoration: none;
    color: #18181b;
    transition: opacity 0.3s;
}

.aeth-coll-card-title a:hover {
    opacity: 0.7;
}

.aeth-coll-card-desc {
    font-size: 0.8rem;
    color: #52525b;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.aeth-coll-card-price {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #18181b;
    margin: 0 0 1rem;
}

.aeth-coll-card-compare {
    font-weight: 400;
    color: #a1a1aa;
    margin-left: 0.5rem;
    font-size: 12px;
}

.aeth-coll-card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* =============================================================
   RESPONSIVE — Collection
   ============================================================= */

/* Tablet */
@media (max-width: 1023px) {
    .aeth-coll-featured {
        grid-template-columns: 1fr;
    }

    /* Ẩn lifestyle column trên tablet */
    .aeth-coll-featured-lifestyle {
        display: none;
    }
}

/* Mobile — VẪN 2 CỘT */
@media (max-width: 767px) {
    .aeth-coll-hero {
        height: clamp(200px, 50vw, 320px);
    }

    .aeth-coll-hero-overlay {
        left: 1rem;
        right: 1rem;
        padding: 1.5rem;
    }

    .aeth-coll-hero-title {
        font-size: 1.5rem;
    }

    /* Featured: main wrapper chiếm full, ẩn lifestyle */
    .aeth-coll-featured-wrapper {
        padding: 2rem 0 3rem;
        /* Tăng padding bottom để có không gian cho phần lưới đè lên */
    }

    .aeth-coll-featured {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        margin: 0 auto;
        min-height: auto;
        gap: 1rem;
        /* Tăng gap chuẩn 16px */
    }

    .aeth-coll-featured-main {
        grid-template-columns: 1fr 1fr;
        /* Khôi phục lại 2 cột theo ý muốn */
    }

    .aeth-coll-featured-product {
        padding: 0;
    }

    .aeth-coll-featured-product-img {
        height: 100%;
        /* Để ảnh full chiều cao theo cột phải */
    }

    .aeth-coll-featured-info {
        padding: 1.5rem 1rem;
        /* Tăng padding top/bottom chuẩn 24px */
    }

    .aeth-coll-featured-tag {
        font-size: 9px;
        padding: 3px 10px;
        margin-bottom: 0.75rem;
    }

    .aeth-coll-featured-title {
        font-size: 1rem;
    }

    .aeth-coll-featured-desc {
        font-size: 0.75rem;
        line-height: 1.4;
        -webkit-line-clamp: 3;
        /* Hiển thị tối đa 3 dòng (tương đương ~2.5 dòng text thực tế) */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        /* QUAN TRỌNG: Vẫn phải giữ thuộc tính này để chống vỡ Layout khi có link dài */
    }

    .aeth-coll-featured-price {
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .aeth-coll-featured-actions {
        /*flex-direction: column;
        align-items: flex-start;*/
        gap: 0.5rem;
    }

    .aeth-btn-coll-primary {
        font-size: 11px;
        padding: 10px 20px;
    }

    .aeth-coll-featured-lifestyle {
        display: none;
    }

    /* Grid: vẫn 2 cột, gap nhỏ */
    /* Grid: Wrapper trên mobile giảm bo góc và độ lún để phù hợp tỷ lệ màn hình */
    .aeth-coll-grid-wrapper {
        border-radius: 1.5rem 1.5rem 0 0;
        margin-top: -1.5rem;
        padding-top: 0.5rem;
    }

    .aeth-coll-grid-section {
        padding: 1rem 1rem 2rem;
        /* Có padding top để tránh content bị đè */
    }

    .aeth-coll-grid {
        gap: 1rem;
        /* Chuẩn 16px */
    }

    /* Card chuyển dọc trên mobile để fit 2 cột */
    .aeth-coll-card {
        flex-direction: column;
    }

    .aeth-coll-card-img-link {
        flex: none;
        max-width: 100%;
    }

    .aeth-coll-card-img {
        min-height: 160px;
        aspect-ratio: 3/4;
    }

    .aeth-coll-card-info {
        padding: 1.25rem 1rem;
        /* Tăng không gian thở cho content thẻ */
    }

    .aeth-coll-card-tag {
        font-size: 8px;
        padding: 2px 8px;
        margin-bottom: 0.5rem;
    }

    .aeth-coll-card-title {
        font-size: 12px;
    }

    .aeth-coll-card-title a {
        color: #252a2b;
        letter-spacing: 0.01em;
    }

    .aeth-coll-card-desc {
        display: none;
        /* Ẩn mô tả trên mobile */
    }

    .aeth-coll-card-price {
        font-size: 12px;
        margin-bottom: 0.5rem;
        color: #71717a;
    }

    .aeth-btn-coll-sm {
        font-size: 10px;
        padding: 8px 14px;
    }

    .aeth-coll-card-actions {
        gap: 0.5rem;
    }

    .aeth-coll-typo-header {
        margin-bottom: -1rem;
    }

    .aeth-coll-typo-heading {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: 8px;
    }
}

/* =============================================================
   FOCUS-VISIBLE — Collection (WCAG 2.4.7)
   ============================================================= */
.aeth-btn-coll-primary:focus-visible,
.aeth-btn-coll-secondary:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

.aeth-coll-card a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 4px;
}

.aeth-coll-featured-title a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* =============================================================
   Fix #5: FOCUS-VISIBLE — WCAG 2.4.7
   Tất cả interactive elements cần visible focus indicator
   ============================================================= */


/* Nav links */
.aeth-nav-links a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
    border-radius: 2px;
}

/* CTA buttons — light background */
.aeth-btn-white:focus-visible,
.aeth-btn-outline:focus-visible,
.aeth-btn-add:focus-visible,
.aeth-bestsellers-header a:focus-visible,
.aeth-ig-follow a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* CTA buttons — dark background (Spotlight, Footer) */
.aeth-btn-spotlight:focus-visible,
.aeth-footer a:focus-visible,
.aeth-newsletter form button[type="submit"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Dot navigation — tất cả carousels */
.aeth-split-dots button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* Planet navigation */
.planet-nav-item:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    border-radius: 50%;
}

/* Hamburger menu */
.aeth-hamburger:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* Nav icons (cart, search) */
.aeth-nav-icon:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
    border-radius: 50%;
}

/* Product cards */
.aeth-product a:focus-visible,
.aeth-split-product a:focus-visible,
.aeth-bc-product a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 4px;
}

/* =============================================================
   Fix #6: PREFERS-REDUCED-MOTION — web-design-guidelines
   Tôn trọng user preference, tắt animation khi cần
   ============================================================= */
@media (prefers-reduced-motion: reduce) {

    /* Marquee — dừng cuộn */
    .aeth-marquee-track {
        animation: none !important;
    }

    /* Instagram scroll — dừng cuộn */
    .aeth-ig-track {
        animation: none !important;
    }

    /* Spotlight planets — dừng float animation */
    .aeth-spotlight-planet-fg,
    .aeth-spotlight-planet-bg,
    .planet-sphere {
        animation: none !important;
    }

    /* Collection cards — tắt fade-in animation */
    .aeth-coll-card {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Tất cả transitions — giảm xuống instant */
    .aeth-nav-links a,
    .aeth-btn-white,
    .aeth-btn-outline,
    .aeth-btn-add,
    .aeth-btn-spotlight,
    .aeth-btn-coll-primary,
    .aeth-btn-coll-secondary,
    .aeth-split-dots button,
    .aeth-ig-item img,
    .aeth-product img,
    .aeth-coll-card,
    .aeth-coll-card-img img,
    .aeth-coll-featured-product-img img,
    .aeth-coll-featured-lifestyle-img img {
        transition-duration: 0.01ms !important;
    }
}