/* ==========================================
    1. BASE & SCROLL LOCK
   ========================================== */
/* 1. XÓA THANH CUỘN TOÀN CỤC NHƯNG VẪN CHO PHÉP CUỘN MƯỢT MÀ */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #EBF2F6;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}

body {
    overflow-y: hidden;
    touch-action: none;
}

body.is-loaded {
    overflow-y: auto;
    touch-action: auto;
    overflow-x: hidden;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* will-change: transform; */
}

/* 2. TIÊU DIỆT LỚP ÁM XANH/VÀNG AUTOFILL CỦA TRÌNH DUYỆT TRÊN FORM */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #FDFDFD inset !important;
    -webkit-text-fill-color: #142534 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 3. TIÊU DIỆT CON MẮT VÀ NÚT XÓA MẶC ĐỊNH TRÊN Ô PASSWORD */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* ==========================================
    2. INTRO PRELOADER (AWAKENING DAWN)
   ========================================== */
#luxury-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;
    /* [LUXURY BLUE] Tâm sáng Xanh Da Trời (#B4D0E5) tản ra viền Xanh Lam Sâu (#6D92B5) 
       Giữ lại bản sắc màu xanh, tôn vinh chữ trắng và cánh hoa, tuyệt đối không xỉn màu. */
    background: radial-gradient(circle at 50% 50%, #B4D0E5 0%, #6D92B5 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

#intro-text {
    position: absolute;
    z-index: 10;
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    opacity: 0;
    transform: translateY(15px);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
}

.bloom-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 5;
}

.petal-intro {
    position: absolute;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(235, 242, 246, 0.95) 0%, rgba(162, 192, 212, 0.6) 100%);
    border-radius: 50% 0 50% 0;
    transform-origin: 100% 100%;
    bottom: 0;
    right: 0;
    opacity: 0;
    box-shadow: 0 0 20px rgba(235, 242, 246, 0.4);
}

.p1 {
    transform: rotate(0deg) scale(0);
}

.p2 {
    transform: rotate(72deg) scale(0);
}

.p3 {
    transform: rotate(144deg) scale(0);
}

.p4 {
    transform: rotate(216deg) scale(0);
}

.p5 {
    transform: rotate(288deg) scale(0);
}

.bloom-container.blooming .p1 {
    animation: bloom1 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0s;
}

.bloom-container.blooming .p2 {
    animation: bloom2 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.2s;
}

.bloom-container.blooming .p3 {
    animation: bloom3 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.4s;
}

.bloom-container.blooming .p4 {
    animation: bloom4 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.6s;
}

.bloom-container.blooming .p5 {
    animation: bloom5 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.8s;
}

@keyframes bloom1 {
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1.6);
    }
}

@keyframes bloom2 {
    to {
        opacity: 1;
        transform: rotate(72deg) scale(1.6);
    }
}

@keyframes bloom3 {
    to {
        opacity: 1;
        transform: rotate(144deg) scale(1.6);
    }
}

@keyframes bloom4 {
    to {
        opacity: 1;
        transform: rotate(216deg) scale(1.6);
    }
}

@keyframes bloom5 {
    to {
        opacity: 1;
        transform: rotate(288deg) scale(1.6);
    }
}

.light-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50px;
    height: 50px;
    background: #EBF2F6;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 100px 50px #EBF2F6;
    z-index: 20;
}

.light-burst.expand {
    animation: burstExpand 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes burstExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(100);
        opacity: 1;
    }
}

/* ==========================================
    3. HEADER & NAVIGATION
   ========================================== */
header {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

body.is-loaded header {
    opacity: 1;
    transform: translateY(0);
}

header.scrolled {
    background: rgba(235, 242, 246, 0.95);
    backdrop-filter: blur(20px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(20, 37, 52, 0.05);
}

header.hero-mode .nav-text {
    color: white;
}

header.hero-mode .nav-icon {
    stroke: white;
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #142534;
    color: white;
    font-size: 9px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.cart-badge.pop {
    transform: scale(1.5);
    background-color: #7A98AF;
}

header.hero-mode .cart-badge {
    background-color: white;
    color: #142534;
}

/* ==========================================
    4. IMMERSIVE HERO (6 SLIDES)
   ========================================== */
#hero-section {
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    background-color: #142534;
}

#hero-section .text-accent {
    color: #B4D0E5 !important; 
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5) !important; 
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 1.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
}

.slide.active .hero-bg {
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Lớp 1: Cực mỏng ở 2 đầu (25-30%) chỉ đủ để dìm nhẹ cho Navbar và Control */
    /* Lớp 2: Quầng sương mờ phía sau text - Opacity giảm từ 65% xuống 20% */
    background:
        linear-gradient(to bottom, rgba(20, 37, 52, 0.3) 0%, transparent 20%, transparent 80%, rgba(20, 37, 52, 0.3) 100%),
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(11, 21, 31, 0.6) 0%, rgba(11, 21, 31, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Tối ưu độ mỏng cho Mobile */
@media (max-width: 768px) {
    .hero-overlay {
        background:
            linear-gradient(to bottom, rgba(20, 37, 52, 0.3) 0%, transparent 20%, transparent 80%, rgba(20, 37, 52, 0.3) 100%),
            radial-gradient(circle at 50% 50%, rgba(11, 21, 31, 0.6) 0%, rgba(11, 21, 31, 0) 80%);
    }
}

.text-shadow-lg {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 8px 15px rgba(0, 0, 0, 0.3),
        0 15px 35px rgba(0, 0, 0, 0.5);
}

.text-shadow-sm {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
    z-index: 30;
    width: 100%;
    max-w-7xl;
    padding: 0 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-content {
        text-align: left;
        padding: 0 4rem;
        margin-top: 5vh;
    }
}

.slide .anim-text {
    transform: translateY(30px);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

body.is-loaded .slide.active .anim-text {
    transform: translateY(0);
    opacity: 1;
}

body.is-loaded .slide.active .delay-1 {
    transition-delay: 0.2s;
}

body.is-loaded .slide.active .delay-2 {
    transition-delay: 0.4s;
}

body.is-loaded .slide.active .delay-3 {
    transition-delay: 0.6s;
}

.progress-track {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
}

.progress-bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #FFFFFF;
    transition: width 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.magnetic-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EBF2F6;
    transition: top 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

@media (hover: hover) {
    .magnetic-btn:hover::before {
        top: 0;
    }

    .magnetic-btn:hover {
        color: #142534 !important;
        border-color: #EBF2F6 !important;
        transform: scale(1.05);
    }
}

/* ==========================================
    5. BOUTIQUE COLLECTION & PRODUCT GRID
   ========================================== */
#boutique-section {
    background-color: #FDFDFD;
    position: relative;
    z-index: 20;
    min-height: 100vh;
}

.cat-btn {
    position: relative;
    color: #7A98AF;
    transition: color 0.3s ease;
}

.cat-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #142534;
    transition: width 0.4s ease;
}

.cat-btn.active,
.cat-btn:hover {
    color: #142534;
}

.cat-btn.active::after,
.cat-btn:hover::after {
    width: 100%;
}

#product-grid {
    transition: opacity 0.5s ease;
    min-height: 400px;
}

.product-card {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: transform, opacity;
}

.product-card.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.card-img-wrapper {
    border-radius: 1.5rem;
    background: #EBF2F6;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.4s ease;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .product-card:hover .card-img-wrapper img {
        transform: scale(1.08);
    }

    .product-card:hover .card-img-wrapper {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }
}

/* HOVER TƯƠNG TÁC CHO NÚT SẢN PHẨM MỚI */
.quick-action-bar {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    gap: 0.5rem;
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .product-card:hover .quick-action-bar {
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .quick-action-bar {
        transform: translateY(0);
        bottom: 12px;
        right: 12px;
        left: auto;
        flex-direction: column;
        gap: 8px;
    }

    .quick-btn-text {
        display: none;
    }

    .quick-btn-icon {
        display: block !important;
        width: 16px;
        height: 16px;
    }

    .quick-action-bar button {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-img-wrapper {
        border-radius: 1rem;
    }
}

.quick-btn-icon {
    display: none;
}

.pagination-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #142534;
    color: #142534;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.pagination-btn:hover {
    background-color: #142534;
    color: #fff;
    transform: scale(1.05);
}

.pagination-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================
    6. DRAWERS, OVERLAYS & MODALS
   ========================================== */
#cart-backdrop,
#auth-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 37, 52, 0.4);
    backdrop-filter: blur(4px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#cart-backdrop.open,
#auth-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

#cart-drawer,
#auth-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 450px;
    background: #FDFDFD;
    z-index: 101;
    transform: translateX(100%);
    /* Bổ sung visibility để ẩn bóng hoàn toàn khi đóng */
    visibility: hidden;
    /* Đồng bộ hiệu ứng mượt mà cho cả transform lẫn vị thế hiển thị */
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    /* BỎ DÒNG box-shadow cũ ở đây đi */
    display: flex;
    flex-direction: column;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden; */
}

/* KHI MỞ: Bật lại bóng và trạng thái hiển thị hiển nhiên */
#cart-drawer.open,
#auth-drawer.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.1);
    /* Chỉ đổ bóng khi mở ra */
}

.drawer-section,
.auth-panel {
    display: none;
    flex-direction: column;
    height: 100%;
}

.drawer-section.active,
.auth-panel.active {
    display: flex;
    animation: fadeIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
        /* Dùng 2D translateY là đủ mượt với cubic-bezier rồi */
    }

    to {
        opacity: 1;
        transform: none;
        /* Bí quyết hoàng kim: Trả về none để vô hiệu hóa hoàn toàn layer trượt, lấy lại 100% độ sắc nét */
    }
}

.cart-item-img {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    background: #EBF2F6;
}

.qty-btn {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #C5D5E4;
    border-radius: 50%;
    color: #142534;
    transition: all 0.3s ease;
}

.qty-btn:hover {
    background: #142534;
    color: white;
    border-color: #142534;
    transform: scale(1.1);
}

.elegant-input {
    width: 100%;
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid #C5D5E4;
    background: transparent;
    font-size: 14px;
    color: #142534;
    transition: border-color 0.4s ease;
    outline: none;
}

.elegant-input:focus {
    border-bottom-color: #142534;
}

.elegant-input::placeholder {
    color: #7A98AF;
    font-weight: 300;
}

select.elegant-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Nút tương tác chung */
.hover-scale {
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* ==========================================
    7. LUXURY TOAST NOTIFICATION
   ========================================== */
#luxury-toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    left: 2rem;
    z-index: 10000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.toast-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-left: 4px solid #142534;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(20, 37, 52, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    transform: translateX(120%);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.toast-card.show {
    transform: translateX(0);
}

.toast-card.error {
    border-left-color: #EF4444;
}

.hide {
    display: none !important;
}

/* ==========================================
    CUSTOM DROPDOWN FILTER STYLES
   ========================================== */
#custom-sort-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#custom-sort-icon.rotate {
    transform: rotate(180deg);
}

.sort-option.selected {
    font-weight: 600;
}

.sort-option.selected::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #142534;
    border-radius: 50%;
}

/* ==========================================
    8. LUXURY CART CHECKBOX & STATES
   ========================================== */
.luxury-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.luxury-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid #C5D5E4;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxury-checkbox:hover {
    border-color: #7A98AF;
}

.luxury-checkbox:checked {
    background-color: #142534;
    border-color: #142534;
}

.luxury-checkbox:checked::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 3px;
    animation: checkmark 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    100% {
        height: 10px;
        width: 5px;
        opacity: 1;
    }
}

.cart-item-row {
    /* Thêm transform-origin để hiệu ứng thu nhỏ mượt và tự nhiên hơn */
    transform-origin: center left;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.cart-item-row.deselected {
    /* Chỉ làm mờ thanh lịch, tuyệt đối KHÔNG dùng grayscale */
    opacity: 0.5;
    /* Hiệu ứng "lùi lại" cực kỳ tinh tế (nhỏ đi 2%) */
    transform: scale(0.98);
}

/* ==========================================
   BẢO VỆ UI: ÉP DARK MODE (CẢNH GIỚI TỐI CAO - GRAY BAIT & GPU OVERDRIVE)
   ========================================== */
@media (prefers-color-scheme: dark) and (max-width: 767px) {

    #luxury-intro {
        /* Giữ nền tối đúng ý đồ của cậu để che mắt thuật toán */
        background: #142534 !important;
        isolation: isolate;
    }

    .petal-intro {
        /* Hủy bỏ mọi content/ảnh cũ */
        content: none !important;

        /* 1. MỒI NHỬ TRUNG TÍNH (NEUTRAL BAIT HACK)
           Thuật toán Force Dark hoạt động bằng cách đảo ngược mã HEX (Invert).
           Trắng (#FFFFFF) sẽ bị đảo thành Đen (#000000).
           NHƯNG! Màu Xám Trung Tính (#808080), khi bị đảo ngược, nó sẽ trở thành #7F7F7F.
           Tức là: XÁM ĐẢO NGƯỢC VẪN LÀ XÁM! 
           Đến đây, cỗ máy ép màu của trình duyệt chính thức bị vô hiệu hóa về mặt toán học. */
        background: #808080 !important;

        /* Cấp cho nó một cái bóng xám mờ để tạo hiệu ứng phát sáng ở bước 2 */
        box-shadow: 0 0 4px #808080 !important;

        /* 2. ĐÒN BẨY GPU (GPU OVERDRIVE)
           Bây giờ trên màn hình đang là một cánh hoa màu xám. Thuật toán đã quét xong và đi chỗ khác.
           Lúc này, ta dùng 'filter' (xử lý hậu kỳ trực tiếp bằng Card đồ họa GPU):
           Bơm độ sáng của màu Xám lên gấp 10 lần (brightness: 10).
           Kết quả: Xám x 10 = TRẮNG LÓA TINH KHIẾT. 
           Trình duyệt không bao giờ dám can thiệp vào thuộc tính filter vì sợ vỡ layout ảnh! */
        filter: brightness(10) !important;
        -webkit-filter: brightness(10) !important;
    }

    /* Áp dụng hệt đòn bẩy Toán học này cho cục sáng bùng nổ */
    .light-burst {
        background: #808080 !important;
        box-shadow: 0 0 10px #808080 !important;
        filter: brightness(10) !important;
        -webkit-filter: brightness(10) !important;
    }

    /* Phần Text thường được tha khi nó nhận diện được nền cha đã tối, 
       chỉ cần ghim cứng màu Trắng là đủ an toàn */
    #intro-text {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    }
}